使用 "this"的 JavaScript 对象

Question

我正在学习 JavaScript。 我想尝试创建一个简单的对象来隐藏/显示一些文本 block ，所以我写了 这段代码。

   var Post = {
    init: function(el){
        this.el = el;
        this.title = el.children(".title");
        this.entry = el.children(".entry");
        var that = this;
        this.title.on("click", function(){
            that.hide();
        });

    },
    hide: function(){
        this.entry.slideUp('fast');
    },
    show: function(){
        this.entry.slideDown('fast');
    }
}
$(".post").each(function(){
    Post.init($(this));
})

http://jsfiddle.net/ZVpau/

问题是，无论您单击什么标题，此代码始终只隐藏最后一篇文章。 谁能告诉我问题出在哪里？

Answer 1

您只有一个 Post 对象，并且它只包含一个元素。
为每个元素创建一个对象。为此，您可以使用构造函数

function Post(el){
    this.el = el;
    this.title = el.children(".title");
    this.entry = el.children(".entry");
    var that = this;
    this.title.on("click", function(){
        that.hide();
    });

    this.hide = function(){
        this.entry.slideUp('fast');
    };
    this.show = function(){
        this.entry.slideDown('fast');
    }
}
$(".post").each(function(){
    new Post($(this));
})

http://jsfiddle.net/ZVpau/1/