JQuery На Нажмите Add Class

Question

Так что я пытаюсь выяснить, почему это не работает:

https://jsfiddle.net/bv6ort3g/

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

В основном я хочу, чтобы нажать на кнопку, которая будет затем добавить класс показать ко всем Div тегов с классом все

Кто-нибудь знает, где я неправильно?

Благодаря

Answer 1

В принципе я это сделал ...

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

Или вы можете использовать это для переключения между классами Отображение и скрытие ...

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

Я ve сохранил ваш 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, но это не обязательно для этого.

Демо: 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(); 
});