Question

初始 - 更新：

HTML：

<li class="span3 trainer-profiles active">
    <aside class="trainer-info">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, fugit hic ex delectus fugiat quidem atque esse. Quod, pariatur, voluptatem.</p>
    </aside>

    <img src="/img/placeholder/trainer-pic.png" alt="" class="trainer-pic">
        <h2 class="trainer-name">name</h2>
        <a href="#" class="trainer-icon"></a>
</li>

JS：

$(".trainer-profiles > a.trainer-icon").on("click", function(e){
    e.preventDefault();
    $(this).parent().toggleClass("active");
});
$(".trainers-view-all").on("click", function(e){
    e.preventDefault();
    $(".trainer-profiles").siblings().toggleClass("active");
});

如您所见，一个部分显示了点击的直接子项。另一个显示了所有。但是，如果类“active”已经存在，则在调用另一个代码块时，脚本会因toggleClass api而删除“active”。

在使用toggleClass api之前删除所有先前活动类的最快方法是什么。目前，任何具有活动类的课程都会被删除，而其他课程则会被“激活”。

欢迎任何帮助：）

非常感谢！

------＆GT;溶液

&.show-all{
    @extend .trainer-profiles.active;
}

创建了一个新类，扩展前一个类给出了相同的结果。

jQuery的：

$(".trainers-view-all").on("click", function(e){
    e.preventDefault();
    $(".trainer-profiles").siblings().toggleClass("show-all");
});

通过在toggle上添加.show-all类，我模仿了类的行为，因为它位于toggleClass中。当类被删除时，它不会否定最初的.active类。

我很确定我可以将jQuery变为较小的状态，但它目前是有效的。

Answer 1

这里我们不打算切换状态...只需将活动类添加到所有元素，因为选项显示viewAll

$(".trainer-profiles > a.trainer-icon").on("click", function(e){
    e.preventDefault();
    $(this).parent().toggleClass("active");
});
$(".trainers-view-all").on("click", function(e){
    e.preventDefault();
    $(".trainer-profiles").addClass("active");
});

使用toggleClass之前使用Jquery清除类

1 个答案: