jQuery 点击添加 Class

Question

所以我想弄清楚为什么这不起作用：

HTML:

<div class="all-btn">All Button</div>

<div class="item all"> item 1 </div>
<div class="item all"> item 2 </div>
<div class="item all"> item 3 </div>
<div class="item all"> item 4 </div>
<div class="item all"> item 5 </div>

CSS:

.all-btn {
    cursor: pointer;
    padding: 5px;
    border: 1px solid #000;
    display: inline-block;
    margin-bottom: 15px;
}

.item {
    display: none;
}
.show {
    display: block;
}

jQuery:

$('.all-btn').on('click', function () {
    $('.all').addClass('show');
});

基本上我想单击按钮，然后将 class 的 show 添加到所有带有 class 的 div 标签全部

有人知道我哪里错了吗？

谢谢

Answer 1

基本上我已经做到了...

$(function(){
    $(".item").hide();
    $(".all-btn").on("click", function(){
        $(".item").show();
    });
});

或者您可以使用它在类显示和隐藏之间切换...

$(function(){
    $(".item").hide();
    $(".all-btn").on("click", function(){
        $(".item").toggle();
    });
});

我让你的HTML保持不变...

<div class="all-btn">Show Button</div>

<div class="item all">Item 1</div>
<div class="item all">Item 2 </div>
<div class="item all">Item 3 </div>
<div class="item all">Item 4 </div>
<div class="item all">Item 5 </div>

但是我已经删除了您的 .item 和 .show 并保留了您的 .all-button CSS 代码，但这不是工作所必需的。

演示：https://jsfiddle.net/bv6ort3g/1/

发烧友演示：https://jsfiddle.net/bv6ort3g/2/

Answer 2

您可以使用 toggleClass() 方法。考虑到您获得的 css 规则。在两者之间切换类

 $('.all-btn').on('click', function () {
   $('.all').toggleClass('show item');
 });

或者：

$('.all-btn').on('click', function () {
    $('.all').toggle();
});

jQuery 点击添加 Class

jQuery On Click Add Class

jquery

css

onclick

click

addclass