javascript - 在 jquery 中添加和删除类

Question

我正在尝试使用 slidetoggle 和 slideDown 显示/隐藏我的 div 元素。它工作得很好。现在我想做的是，我想将 addClass 'visible-divs' 仅添加到可见 div，并在它们隐藏时 removeClass。

问题是，该类已成功添加，但当它向上滑动 以隐藏它们时，它并没有删除该类。我做错了什么？

$(".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

顺便说一句，更改隐藏元素的类有什么意义？根据定义，不会看到效果。如果您想知道哪些元素被隐藏，您可以单独使用 :hidden 选择器