.parents (). removeClass () не работает

Question

Я получил этот javascript, пытаясь удалить класс на родительском элементе:

$(this).parents(".box").removeClass("expanded");

в этом html:

<div class="box trx">
<a href="javascript:;" class="open-content"><?php the_post_thumbnail('thumbnail'); ?></a>
<div class="expandable">
    <?php the_content(); ?>
    <span class="simple">
        <a class="cunload" href="javascript:;">Close</a>
    </span>
</div>
</div>

К сожалению, пока это не работаетЯ сделал несколько тестов, таких как:

$(this).parents(".box").removeClass("trx");

и

$(this).parents(".box").addClass("exd");

Все это работает.Я использую jQuery 1.6.2 и jQuery masonry на wordpress сайте.Здесь есть живое демо , чтобы увидеть, как все это (не) работает.По сути, это работает, но тот факт, что класс не удален из div, мгновенно открывает div и его содержимое.Я довольно смущен, почему он не удаляет класс .expanded.

РЕДАКТИРОВАТЬ: я только что понял, что класс еще существует, когда документ загружен.Затем он добавляется по щелчку на картинке, поэтому я думаю, что моя проблема удаления происходит из этогоИзвините за неверное объяснение.

Answer 1

У вас есть обработчик кликов для элемента .box.

А внутри него у вас есть обработчик кликов на элементе .cunload.

Поскольку .cunload вложено в .box, оба элемента получают событие нажатия, когда вы нажимаете кнопку close, и поэтому оно снова открывается .. ( из-за событий, восходящих по иерархии DOM )

Измените ваш .cunload обработчик на

$('.cunload').click(function(e){
            e.stopPropagation();
            restoreBoxes();
            $(this).parents(".box").removeClass("expanded");
});

Answer 2

Я думаю, что это работает, но ваш сценарий снова расширяет мальчика после нажатия на кнопку закрытия. Вы должны изменить заголовок вашей функции обработчика события закрытия на:

function(event) {
    event.stopPropagation();
    [...]

, чтобы одно и то же событие щелчка не могло всплыть в иерархии документа.

Answer 3

Если я использую этот код:

$(".cunload").click(function() {
    $(this).parents(".box").removeClass("trx");
});

С этим HTML:

<div class="box trx">
<div class="expandable">
    <span class="simple">
        <a class="cunload" href="#">Close</a>
    </span>
</div>
</div>

Тогда, похоже, он работает точно так, как задумано, и вы можете увидеть, как он работает здесь: http://jsfiddle.net/jfriend00/Djjuz/. Нажмите на ссылку закрытия и увидите, что цвет фона меняется при удалении класса trx.

Итак, в вашем коде должно быть что-то еще, что вы не раскрываете, что делает его неработоспособным. Пожалуйста, включите точный код, который вы используете для запуска функции, и, возможно, лучше объясните, что вы пытаетесь сделать, и что вы наблюдаете, происходит или не происходит.

Если вы ожидаете, что мы воспользуемся ссылкой на рабочую страницу, опишите, где находится соответствующий код (на этой странице много файлов JS), и опишите, на что вы нажимаете, и на какой результат вы рассчитываете. Пока что вы только сказали нам, что что-то не работает, но не предоставили нам достаточно контекста, чтобы выяснить, что именно не работает, какой код вы используете для его запуска и как мы могли бы воспроизвести проблему или посмотрим на проблему сами. Вы должны помочь себе, предоставив нам достаточно информации, если вам нужна качественная помощь.

Кроме того, понимаете ли вы, что когда вы передаете селектор методу .parents("selector"), он ограничивает операцию только родителями, которые соответствуют этому селектору? Так что .parents(".box") будет работать ТОЛЬКО с родительскими объектами, которые имеют class"box".

Answer 4

возможно это будет работать:

$(this).parents(".box").filter(".expanded").removeClass("expanded");