1

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

$(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 - результат такой же.

4
  • 1
    сделайте воспроизводимый пример 2 янв 2020 в 14:39
  • if(newName == '', newText == ''){ вы в курсе как работает условие с запятой и уверены что оно вам нужно?
    – InDevX
    2 янв 2020 в 14:42
  • у вас там вообще .more-button - динамический элемент, так что обработчик к нему прицеплять надо соответствующим образом через общего родителя.
    – teran
    2 янв 2020 в 15:39
  • @humster_spb добавила в пост весь jquery код, пример здесь - vpodkove.ru/activelist . InDevX спасибо, поправила. Нужно) teran обращения переписывала и через родителя, и через соседа, эффект тот же - работа через одного.
    – Lilu
    2 янв 2020 в 16:33

1 ответ 1

0

Во первых вынесите действия по удалению/свертыванию элементов с функции клика на #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');

    });         
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.