Сворачиваемый список в Jquery?

Question

[Tsatsyn]

Добрый день!
Прохожу обучение и выполняю задание по формированию списков (блокнот). Нахожусь на стадии свертывания добавленных записей и не могу понять как определить $(this), чтобы списки сворачивались каждый отдельно. Сейчас получается, что если добавлено, например, 3 списка, то при нажатии .arrow сворачиваются все 3, а не один конкретный.

$(function(){
  $('.button').click(function(event){
    event.preventDefault();
  let newTitle = $('.title').val();
  let newDescription = $('.description').val();
  if(!newTitle){
    alert('Поле "Название" не заполнено!')
    return false;
  };
  if(!newDescription){
    alert('Поле "Описание" не заполнено!')
    return false;
  };
$('.left-list').append(`<div class="new-list">
<div class="new-list-container">
<span class="new-list-title">${newTitle}</span>
<button class="delete"></button>
<button class="arrow"></button>
</div>
<span class="new-list-description">${newDescription}</span>
</div>`);
$('.title').val('');
$('.description').val('');
$('.empty-list').hide();
  });
});

$(document).on('click', '.delete', function(event){
  event.preventDefault();
  $(this).closest('.new-list').remove();
if ($('.new-list').length == 0) {
  $('.empty-list').show();
};
});

$(document).on('click', '.arrow', function(event) {
    event.preventDefault();
  $('.new-list-description').slideToggle('slow');
});

Прошу подсказать :)

Comments

[Павел]

Нужно видеть верстку списков - а так - пальцем в небо, как два ответа, которые вам уже дали...

[Tsatsyn]

Павел,

$(function(){
  $('.button').click(function(event){
    event.preventDefault();
  let newTitle = $('.title').val();
  let newDescription = $('.description').val();
  if(!newTitle){
    alert('Поле "Название" не заполнено!')
    return false;
  };
  if(!newDescription){
    alert('Поле "Описание" не заполнено!')
    return false;
  };
$('.left-list').append(`<div class="new-list">
<div class="new-list-container">
<span class="new-list-title">${newTitle}</span>
<button class="delete"></button>
<button class="arrow"></button>
</div>
<span class="new-list-description">${newDescription}</span>
</div>`);
$('.title').val('');
$('.description').val('');
$('.empty-list').hide();
  });
});

$(document).on('click', '.delete', function(event){
  event.preventDefault();
  $(this).closest('.new-list').remove();
if ($('.new-list').length == 0) {
  $('.empty-list').show();
};
});

$(document).on('click', '.arrow', function(event) {
    event.preventDefault();
  $('.new-list-description').slideToggle('slow');
});

[Павел]

Tsatsyn, Как-то так, наверное :)

$(document).on('click', '.arrow', function(event) {
    event.preventDefault();
  $(this).closest('.new-list').find('.new-list-description').slideToggle('slow');
});

[Tsatsyn]

Павел, какой-то сложный интерфейс "чатика")))

Спасибо! Работает! Голову ломал себе.

Answer 1

[Павел]

Tsatsyn, Как-то так, наверное :)

$(document).on('click', '.arrow', function(event) {
    event.preventDefault();
  $(this).closest('.new-list').find('.new-list-description').slideToggle('slow');
});

Comments

[Tsatsyn]

О, Господи, да!

Спасибо!

Answer 2

[zkrvndm]

Эм, вы уже ответили на свой вопрос:

$(document).on('click', '.arrow', function(event) {
event.preventDefault();
$(this).slideToggle('slow');
});

Comments

[Павел]

$(this) - в данном случае будет стрелка, а не список

[Tsatsyn]

Да, я так делал... стрелка благополучно свернулась и исчезла :)

[zkrvndm]

Tsatsyn, смотрите по разметке своей $(this) это кликнутый элемент, возможно вам надо просто получить его родителя или что там у вас:

$(this).parent(); // Родитель
$(this).parent().parent(); // Родитель родителя и так далее

Answer 3

[Lord_Dantes]

$(document).on('click', '.arrow', function(event) {
event.preventDefault();
$(this).find('.new-list-description').slideToggle('slow');
});

Comments

[Павел]

Как вы это узнали? )))
$(this).find('.new-list-description')
А если там вот так:

<div class="spisok">
<span class='arrow'></span>
<div class="new-list-description"></div>
</div>

[Tsatsyn]

Павел, Так не работает. Пробовал. Может надо еще код выложить?

[Lord_Dantes]

Tsatsyn, покажите структуру.

[Lord_Dantes]

Павел, предположил