jquery: toggleClass для одного из множества элементов

148

03 февраля 2022, 05:30

Задача: при нажатии на кнопку появляется блок, где при нажатии на внутреннюю кнопку должно скрываться/появляться окно и меняться фон кнопки (стрелка вверх/вниз). Мой код

$(function(){
    $('#add-button').click(function(){
        var newName = $('.action-name').val();
        var newText = $('.action-text').val();
        var newList = $('<div class="new-list"><h3>'+newName+'<button class="del-button" type="submit" aria-label="Удалить"></button></h3><button class="more-button" type="submit" aria-label="Свернуть"></button><p class="list-text">'+newText+'</p></div>');

        $('.del-button').click(function(){
            $(this).parent().parent().remove();
        });
        $('.more-button').click(function(){
             $(this).parent().children('p').toggleClass('list-text hide-text');
        });
        if(newName == ''){
            return false;   
        } else if(newText == ''){
            return false;   
        } else {
            $('#column-left').append(newList); 
        };
        if(newList == ''){
            $('#list-empty').show();
        } else {
            $('#list-empty').hide();
        }
        return false; 
    });         
});

http://vpodkove.ru/activelist/ - сам пример здесь

Проблема: Когда отрыт 1 блок, внутри срабатывает toggleClass и все хорошо. Открываешь второй блок, у первого toggleClass перестает работать, но работает у второго. Если создавать много блоков, то toggleClass работает у каждого второго. Пробовала переписывать под if/else - результат такой же.

Answer 1

Во первых вынесите действия по удалению/свертыванию элементов с функции клика на #add-button(как они у вас вообще туда затисались?=) ) Во вторых, так как это новые элементы, обращайтесь к ним через родителя. Вот рабочий пример:

$(function(){
    $('#add-button').click(function(){
        var newName = $('.action-name').val();
        var newText = $('.action-text').val();
        var newList = $('<div class="new-list"><h3>'+newName+'<button class="del-button" type="submit" aria-label="Удалить"></button></h3><button class="more-button" type="submit" aria-label="Свернуть"></button><p class="list-text">'+newText+'</p></div>');
        if(newName == ''){
            return false;   
        } else if(newText == ''){
            return false;   
        } else {
            $('#column-left').append(newList); 
        };
        if(newList == ''){
            $('#list-empty').show();
        } else {
            $('#list-empty').hide();
        }
        return false; 
    });

    $('#column-left').on('click', '.del-button', function() {
        $(this).parent().parent().remove();
    });
    $('#column-left').on('click', '.more-button', function() {
        $(this).parent().find('p').toggleClass('list-text hide-text');
    });         
});