0

私はジャバスクリプトを学んでいます。テキストの一部のブロックを非表示/表示するための単純なオブジェクトを作成してみたいので、このコードを書きました。

   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/

問題は、このコードは、クリックしたタイトルに関係なく、常に最後の投稿のみを非表示にしていることです。誰が問題がどこにあるのか教えてもらえますか?

4

1 に答える 1

2

Post オブジェクトは 1 つしかなく、要素は 1 つしか保持されません。
要素ごとにオブジェクトを作成します。これを行うには、コンストラクターを利用できます

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/

于 2013-09-07T16:22:21.393 に答える