0

初始 - 更新：

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");
});

如您所见，一个部分显示了单击的直接子级。另一个说明了一切。但是，如果“活动”类已经存在，则在调用另一个代码块时，脚本会由于 toggleClass api 而删除“活动”。

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

欢迎任何帮助:)

非常感谢！

------> 解决方案

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

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

jQuery：

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

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

我很确定我可以让 jQuery 达到更小的状态，但它目前是有效的。

4

1 回答 1

0

在这里，我们不希望切换状态......只需将活动类添加到所有元素，因为选项显示 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");
});
于 2013-08-31T00:45:47.287 回答