jQuery set class не работает после того, как он уже был установлен

Question

jQuery set class не работает после того, как он уже был установлен

0

пытаясь создать простой расширяемый заголовок.

Я не хочу использовать аккордеоны и просто ищу недорогое домашнее решение. Поскольку мне нравится писать и изучать вещи сами.

В моих глазах я должен работать. Но это не так.

Цель:

При нажатии на заголовок весь контент скрыт, а затем отображается следующий элемент содержимого после заголовка. Это позволяет в любое время показывать более одного содержимого.

После этого класс div изменяется на "выбранное" состояние.

Это работает нормально.

Однако следующая часть запускается, если класс заголовка является выбранным состоянием, и если это так, СЛЕДУЕТ изменить класс обратно на нормальный, а также скрыть содержимое следующего элемента.

Цель состоит в том, чтобы разрешить опции hide/show.

Однако последняя часть изменения класса не работает. Я также знаю, что есть много для эффективного способа написания этого, но не знаю, как это сделать.

JS:

$(function() {
$('.headingHelp').click(function(){
    $('.infoHelp').fadeOut();
    $(this).next('.infoHelp').fadeIn();
    $(this).attr('class', 'headingHelp_sel');
});

$('.headingHelp_sel').click(function(){
    $(this).next('.infoHelp').fadeOut();
    $(this).attr('class', 'headingHelp');
});
});

Пример HTML:

<p class="headingHelp">Content Heading</p>
<div class="infoHelp">
Content 
</div>

<p class="headingHelp">Content Heading 2</p>
<div class="infoHelp">
Content 2
</div>

JSFiddle: http://jsfiddle.net/C7bHn/1/

Заранее спасибо!

Lovelock 18 март 2014, в 00:48

Источник

Теги:

javascript

class

jquery

html

css

2 ответа

0

Селектор jQuery, работающий "НА ТЕКУЩЕМ МОМЕНТЕ". Ваш селектор $ ('. HeadingHelp_sel') пуст при запуске этого кода.

Лучший код:

$(function() {
    $('.headingHelp').click(function(){
        var open = $(this).next('.infoHelp').is(':visible');
        $('.infoHelp').fadeOut();

        if(!open)
        {
            $(this).next('.infoHelp').fadeIn();
        }
    }); 
});

user3225497 17 март 2014, в 21:05

Ещё вопросы

showdev · Accepted Answer · 2014-03-17T20-19-00.000Z

Поскольку ваш "выбранный" класс добавляется после загрузки DOM, jQuery не знает об этом.

Я предлагаю использовать jQuery on() для делегированных событий. Это позволит вам выбрать динамически создаваемые классы:

$(document).on('click','.headingHelp',function(){
    $('.infoHelp').fadeOut();
    $(this).next('.infoHelp').fadeIn();
    $(this).attr('class', 'headingHelp_sel');
});

$(document).on('click','.headingHelp_sel',function(){
    $(this).next('.infoHelp').fadeOut();
    $(this).attr('class', 'headingHelp');
});

Рабочий пример (jsfiddle)

Редактировать:

Здесь другой метод без использования делегирования. Он просто добавляет/удаляет класс "sel", а не полностью меняет класс.

$('.headingHelp').click(function(){

    // save clicked element in a variable for use below
    $this=$(this);  

    // remove / add "selected" class
    $('.headingHelp').removeClass('sel');
    $this.addClass('sel');

    // fade in / out content
    $('.infoHelp').fadeOut();
    $this.next('.infoHelp').stop().fadeIn();

});

.infoHelp {
    display: none;
}

.headingHelp {
    background-color:#999;
    padding: 1%;
    cursor: pointer;
    color: white;
}

.headingHelp:hover,
.headingHelp.sel {
    background-color:#666;
}

Рабочий пример (jsfiddle)

Не думал об использовании .on () Глупый я! Спасибо мысль пометит как правильную когда смогу :)