jQuery скрипт по добавлению класса

216

17 ноября 2018, 07:40

Всем привет. У меня появилась проблема и мне очень нужна ваша помощь. Описываю проблему: У меня есть на сайте элементы, вот структура:

<div class="element-sidebar_content">
   <ul>
        <li><a>Витамин С</a></li>
        <li><a>Для женщин</a></li>
        <li><a>Для мужчин</a></li>
        <li><a>Спортивные</a></li>
        <li><a>Мультивитамины</a></li>
        <li><a>Витамин С</a></li>
   </ul>
   <span class="more enable">Показать все</span>
   <span class="less disable">Показать меньше</span>
</div>

При нажатии на span "Показать все" к списку ul Добавляется class, который его расширяет по высоте. Таких элементов штук 5 с одинаковой структурой. Все работает, но применяется ко всем 5 элементам. Как можно реализовать так, чтобы шла выборка именно из того объекта в котором находится span?

Код jQuery Прикладываю:

$('.more').on('click', function() {
    $('.element-sidebar_content').children('ul').addClass('active-more');
    $('.more').removeClass('enable');
    $('.more').addClass('disable');
    $('.less').removeClass('disable');
    $('.less').addClass('enable');
});
$('.less').on('click', function() {
    $('.element-sidebar_content').children('ul').removeClass('active-more');
    $('.less').removeClass('enable');
    $('.less').addClass('disable');
    $('.more').removeClass('disable');
    $('.more').addClass('enable');
});

Скрипт не идеальный, но я только учусь)

Answer 1

$('.more').on('click', function() { $(this).parent('.element-sidebar_content').children('ul').addClass('active-more'); $(this).removeClass('enable'); $(this).addClass('disable'); $(this).parent('.element-sidebar_content').children('.less').removeClass('disable'); $(this).parent('.element-sidebar_content').children('.less').addClass('enable'); });

Не уверен по оптимальности и правильности, но суть в том, что классы надо менять только у соседних элементов элемента, по которому кликнули, а не у всех что на странице (как у Вас реализовано). Давно не использовал Jquery))