同じクラスのjQueryセレクター

Question

私はOffersContainer div内に複数のdivを持っています。ページの読み込みでは、OffersContainerの最初のdivのみが表示されます。その後、「もっと見る」をクリックすると、最初の3つのdivが表示され、最後に「もっと見る」をクリックすると、2回目にすべてのdivを表示します。

問題一度に2つのOffersContainerがあります。そして、私はこれら2つが互いに独立しているようにしたい。実際に何が起こるかは、最初に左のOffersContainer'sをクリックすると、それが完全に動作する、つまり3つのdivを表示することを示します。しかし、右のOffersContainerのdivをもっと見るをクリックすると、最初の3つのdivを表示する代わりに、すべてが表示されます。それは他のdivとは独立して動作していないことを意味しますか？私はそれを別々に走らせることができますか？

P.S：何らかの理由で、これらのdivの両方が同じクラスOffersContainerになるため、名前を変更できません。私は間違って何をしていますか？間違ったセレクタを使用していますか？

Here is the Fiddle

And Here is the Fiddle with just one OffersContainer div just in case anyone wants to see

Answer 1

共有グローバルvaribaleに情報をクリックし保存しないでください。代わりに、各スパンのクラス名でそれを持続することができます

$(".OffersContainer > div:gt(0)").hide(); 

$(".OffersContainer > span").click(function() { 
    $(this).siblings($(this).hasClass('click') ? "div:gt(0)" : "div:lt(3)").slideDown(); 
    $(this).addClass('click'); 
}); 

デモ：https://jsfiddle.net/qo55rmuy/2/

Answer 2

あなたが最初のロードに関連するdiv要素を隠すためにCSSを使用することができます。これは、他の.OfferContainer要素の内容が完全に隠されている問題を解決します。

それは目に見える要素の数をキーとなるように、あなたはこのように、代わりに click変数の、ロジックを変更することができます。そこから

.OffersContainer > div:nth-child(n+2) { 
    display: none; 
} 

：ときためです

$(".OffersContainer > span").click(function() { 
    var $siblings = $(this).siblings(); 
    var visibleLength = $siblings.filter(':visible').length; 
    $siblings.filter(visibleLength != 1 ? "div:gt(0)" : "div:lt(3)").slideDown(); 
}); 

Updated fiddle

Answer 3

varクリックが真である右側の「もっと見る」をクリックします。あなたはとてもグローバル変数は、物事を混合してjQuery.data

$(".OffersContainer > span").click(function(){ 
    var click = $.data(this, "click") || false; 
    $(this).siblings(click ? "div:gt(0)" : "div:lt(3)").slideDown(); 
    $.data(this, "click", true); 
}); 

Demo