Использование идентификатора события с определенным классом и toggleClass

Я использую toggleClass, как в следующем примере на странице документации jQuery, чтобы создать решение «Читать больше»/«Читать меньше»:

http://api.jquery.com/toggleClass/

Вот код HTML, который я использую:

<span id="block1-link" class="read-more-text more">Read More</span>
<span id="block1-content" class="sh-content">1st paragraph text<span class="read-more-text"> Hide Text</span></span>

<span id="block2-link" class="read-more-text more">Read More</span>
<span id="block2-content" class="sh-content">2nd paragraph text<span class="read-more-text"> Hide Text</span></span>

И сопутствующий jQuery:

    (function ($) {
        $( ".read-more-text" ).click(function() {
            $( ".sh-content" ).toggleClass( "show-text" );
            $( ".read-more-text.more" ).toggleClass( "hide-text" );
        });
    }(jQuery));

Прямо сейчас код показывает оба блока текста, когда я нажимаю ссылку «Подробнее». Я бы хотел, чтобы щелчок влиял только на связанный «блок». Итак, если я нажму на диапазон с «block1-link», диапазон с «block1-content» должен переключиться.

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

Я уверен, что это что-то очевидное, что я упускаю. Я надеюсь, что кто-то может помочь мне исправить то, что я написал.

Спасибо!


javascript html jquery toggleclass
person Yazmin    schedule 10.02.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуй это. Вы можете использовать .on() jquery.

$(".read-more-text" ).on( "click", function() {
    $(this).next().toggleClass("show-text");
    $(this).toggleClass("hide-text");
});

Редактировать. Развивая ту же тему, я изменил классы html, чтобы они были чище и проще.

<span id="block1-link" class="read-more">Read More</span>

<span id="block1-content" class="sh-content">1st paragraph text<span class="hide-more"> Hide Text</span>
</span>

<span id="block2-link" class="read-more">Read More</span>

<span id="block2-content" class="sh-content">2nd paragraph text<span class="hide-more"> Hide Text</span></span>

$(".read-more" ).on( "click", function() {
    $(this).next().toggleClass("show-text");
    $(this).toggleClass("hide-text");
});

$(".hide-more" ).on( "click", function() {
    $(this).parent().toggleClass("hide-text");
    $(this).parent().prev().toggleClass("show-text");
});
person minion    schedule 10.02.2015
comment
Спасибо. Как только я переключил переключаемые классы на кнопку «Скрыть больше», это сработало отлично. - person Yazmin; 11.02.2015

arrow_upward
2
arrow_downward

Вы можете использовать контекст, по которому щелкнули текущий элемент this, чтобы настроить таргетинг только на щелкнутый и следующий элемент div:

$( ".read-more-text" ).click(function() {
        $(this).next().toggleClass( "show-text" );
        $(this).toggleClass( "hide-text" );
    });
person Milind Anantwar    schedule 10.02.2015