1

Сверстал форму, которая по клику добавляет элементы. У добавленных элементов реализовал кнопку "удалить элемент" и "свернуть элемент" с помощью jquery. Удаление работает как надо, а кнопка "свернуть" сворачивает все добавленные элементы, а нужно один конкретный. Не пойму, почему так происходит, прошу помочь.

$(document).ready(function() {
  function addCase() {
    let name = $('input').val(),
        text = $('textarea').val();
    if(name.length !== 0 && text.length !== 0) {
      $('input').removeClass('error');
      $('textarea').removeClass('error');
      $('.cases-none').hide();
      $('.cases-list').append(`
        <div class="cases-item">
          <div class="case-author">${name}
            <button class="case-delete"></button>
            <button class="case-button"></button>
          </div>
          <div class="case-textos">${text}</div>
        </div>
      `);
      name = $('input').val('');
      text = $('textarea').val('');
    } else {
      $('input').addClass('error');
      $('textarea').addClass('error');
    }
  }

  function hideCase() {
    let gryb = $('.case-textos');
    sbyb = $('.case-button');
    gryb.slideToggle();
    sbyb.toggleClass('case-down');
  }

  function deleteCase(item) {
    item.remove();
    let items = $('.cases-item');
    if(items.length == 0) {
      $('.cases-none').show();
    }
  }

  $('.case-add').on('click', addCase);

  $('body').on('click', '.case-delete', function(event) {
    event.preventDefault();
    let item = $(this).parents('.cases-item');
    deleteCase(item);
  });

  $('body').on('click', '.case-button', function(event) {
    event.preventDefault();
    let souls = $(this).parents('.case-author');
    hideCase(souls);
  });
});

3 ответа 3

2

Это потому что ты удалении в функцию deleteCase передаешь еэлемент item который необходимо удалить и выполняешь item.remove();

А в hideCase ты ищешь все элементы .case-textos в DOM - дереве и применяешь к ним

Необходимо применить к конкретному элументу

$('body').on('click', '.case-button', function (event) {
    event.preventDefault();
    let el = $(this).closest('.cases-item').find('.case-textos');
    hideCase(el);
});

function hideCase(gryb) {
    gryb.slideToggle();
    $('.case-button').toggleClass('case-down');
}
4
  • Большое спасибо!
    – Summersby
    1 мая 2020 в 11:28
  • Добрый день, поправил код, но теперь скрытие вообще не работает(
    – Summersby
    2 мая 2020 в 10:20
  • Добрый день, поправил! 2 мая 2020 в 10:45
  • Сергей, спасибо) Я еще не отметил, что кнопке я меняю класс только для смены рисунка. По умолчанию в case-button рисунок -стрелка вниз, а в case-down-стрелка влево
    – Summersby
    2 мая 2020 в 10:51
0

Я уже в замешательстве, ну все равно не работает, в консоли ошибок тоже нет((

$(document).ready(function(){

  function addCase() {
    let name = $('input').val(),
        text = $('textarea').val();

    if (name.length !== 0 && text.length !== 0) {

        $('input').removeClass('error');
        $('textarea').removeClass('error');
        $('.cases-none').hide();
        $('.cases-list').append(`

            <div class="cases-item">
                <div class="case-author">${name}
                <button class="case-delete"></button>
                <button class="case-button"></button>
                </div>
                <div class="case-textos">${text}</div>
            </div>

        `);

        name = $('input').val('');
        text = $('textarea').val('');


    } else {
        $('input').addClass('error');
        $('textarea').addClass('error');
    }
  }

  $('.case-button').on('click', function (event) {
    event.preventDefault();

    let el = $(this).closest('.cases-item').find('.case-textos');
    hideCase(el);
  });   

  function hideCase(textel) {

    textel.slideToggle();
    $('.case-button').toggleClass('case-down');
  }

  function deleteCase(item) {
    item.remove();

    let items = $('.cases-item');

    if (items.length == 0) {
        $('.cases-none').show();

    }
  }

  $('.case-add').on('click', addCase);

  $('body').on('click', '.case-delete', function(event){
    event.preventDefault();

    let item = $(this).parents('.cases-item');

    deleteCase(item);

  });

});
3
  • добавь свой html 2 мая 2020 в 11:09
  • Добавил и HTML)
    – Summersby
    2 мая 2020 в 17:31
  • В общем, я нашел ошибки, всё заработало, спасибо, Сергей! Там получилось, клик со сворачиванием у меня попал в функцию удаления, потому что скобки и точку с запятой не перенес, и делегирование еще через body сделал.
    – Summersby
    3 мая 2020 в 9:27
0

	<body>
<div class="fixed-container">
<div class="cases">
<h2>Список дел:</h2>
	<div class="cases-none">Список пуст...</div>
		<div class="cases-list">
			
		</div>	
	</div>
	<div class="add-cases">
		<h2>Добавить новое дело</h2>
			<div class="white-container"> 
	<label class="case-label">
		<span>*Название</span>
		<input type="text" name="name" placeholder="Напишите дело">
		</label>
		<label class="case-label">
		<span>*Описание</span>
		<textarea name="message" placeholder="Напишите что-нибудь..."></textarea>
		</label>
		<button class="case-add">Добавить дело</button>
		</div>
	</div>
	</div>
	<script src="jquery-3.5.0.min.js"> </script>
	<script src="calendar.js"></script>	
	</body>
</html>

Ваш ответ

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

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