jqueryクラスの追加と削除

Question

slidetoggleとslideDownを使用してdiv要素の表示/非表示を試みています。その完璧に動作します。 今私がしようとしているのは、表示されているdivのみに対してaddClass 'visible-divs'と表示され、非表示になるときはremoveClassになります。

問題は、クラスが正常に追加されましたが、そのクラスを非表示にする場合は、クラスslides upを削除しません。私は間違って何をしていますか？これが機能するために

$(".OffersContainer > div:gt(0)").hide(); 
 
    
 
$(".OffersContainer > span").click(function() { 
 
    this.clickCount = (this.clickCount || 0) + 1 
 
    var command = this.clickCount % 3 === 0 ? 'slideToggle' : 'slideDown'; 
 
    $(this).siblings(this.clickCount % 3 === 1 ? "div:lt(3)" : "div:gt(0)")[command](); 
 
    $('.pan-box').filter(':visible').addClass("visible-divs"); 
 
    $('.pan-box').filter(':hidden').removeClass("visible-divs"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="OffersContainer"> 
 
    <div class='pan-box'>A</div> 
 
    <div class='pan-box'>B</div> 
 
    <div class='pan-box'>C</div> 
 
    <div class='pan-box'>D</div> 
 
    <div class='pan-box'>E</div> 
 
    <span>Show more</span> 
 
</div>

Answer 1

あなたはアニメーションが完了した後に:visible/:hidden要素を選択する必要があります。これを行うには、コールバック関数のパラメータを使用します。余談として

$(".OffersContainer > span").click(function() { 
    this.clickCount = (this.clickCount || 0) + 1 
    var command = this.clickCount % 3 === 0 ? 'slideToggle' : 'slideDown'; 
    $(this).siblings(this.clickCount % 3 === 1 ? "div:lt(3)" : "div:gt(0)")[command](function() { 
     $('.pan-box').filter(':visible').addClass("visible-divs"); 
     $('.pan-box').filter(':hidden').removeClass("visible-divs"); 
    }); 
}); 

Updated fiddle

を、隠し要素にクラスを変更する点は何ですか？定義により、その効果は見られません。

Answer 2

どのようなオプションを隠すか表示するかを既に知っているので、このコードを使用するよりも、アニメーションが終了するのを待たずに待つ必要がある場合は、:hiddenセレクタだけを使用することができます：JSFiddle playgroundにも

$(".OffersContainer > div:gt(0)").hide(); 
 
$(".OffersContainer > span").click(function() { 
 
    this.clickCount = (this.clickCount || 0) + 1 
 
    var command = this.clickCount % 3 === 0 ? 'slideToggle' : 'slideDown'; 
 
    $(this).siblings(this.clickCount % 3 === 1 ? "div:lt(3)" : "div:gt(0)")[command](); 
 
    console.log(this.clickCount % 3 * 3 - 1); 
 
    $('.pan-box:lt(' + (this.clickCount % 3 * 3) + ')').addClass("visible-divs"); 
 
    $('.pan-box:gt(' + (this.clickCount % 3 * 3) + ')').removeClass("visible-divs"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="OffersContainer"> 
 
    <div class='pan-box'>A</div> 
 
    <div class='pan-box'>B</div> 
 
    <div class='pan-box'>C</div> 
 
    <div class='pan-box'>D</div> 
 
    <div class='pan-box'>E</div> 
 
    <span>Show more</span> 
 
</div>

。