在 jquery 中添加和删除 class

Question

我正在尝试 show/hide 我的 div 元素使用 slidetoggle 和 slideDown。它工作得很好。现在我想做的是，我只想 addClass 'visible-divs' 到可见的 div，当它们被隐藏时 removeClass。

问题是，class 已成功添加，但在 slides up 隐藏它们时并没有删除 class。我做错了什么？

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

为此，您需要 select :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

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

Answer 2

如果您不想等待动画完成，因为您已经知道要隐藏或显示哪些选项，那么您可以使用此代码：

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

也在 JSFiddle playground.

在 jquery 中添加和删除 class

Adding and removing class in jquery

javascript

jquery

addclass

removeclass