jQuery по клику Добавить класс

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

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

По сути, я хочу нажать кнопку, которая затем добавит класс show ко всем тегам div с классом all.

Кто-нибудь знает, где я ошибаюсь?

Спасибо


click jquery css onclick addclass
person Chudz    schedule 23.07.2015    source источник
comment
Вы не включили jQuery. Сделайте это в разделе Frameworks & Extensions: jsfiddle.net/2e08460L.   -  person Rick Hitchcock    schedule 23.07.2015

Ответы (2)


arrow_upward
0
arrow_downward

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

$(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 и сохранил ваш CSS-код .all-button, но это не обязательно для того, чтобы это работало.

Демонстрация: https://jsfiddle.net/bv6ort3g/1/

Демо Fancier: https://jsfiddle.net/bv6ort3g/2/

person FCG    schedule 23.07.2015
comment
Спасибо за ответ! Это то, что я пытаюсь сделать, но я не так хорош в JavaScript/jQuery :) jsfiddle.net/2e08460L/ 1 в основном я хочу сделать это, но с плавной анимацией затухания, похожей на версию затухания, но я бы предпочел использовать CSS, когда блоки перемещаются, я хочу, чтобы это также анимировалось. В любом случае спасибо - person Chudz; 24.07.2015
comment
@Chudz Это не проблема, и добро пожаловать - я рад, что смог помочь. - person FCG; 24.07.2015

arrow_upward
0
arrow_downward

Вы можете использовать метод toggleClass(). Учитывая правила css, которые вы получили. Переключение между двумя классами

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

Or:

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