Как идентифицировать каждый блок в jQuery?

Question

[Вадим Круглов]

Всем привет. Имеется вид комментария такого вида:

244 это id комментария

<div id="comments_244">

<span>
<a href="javascript://" id="edit_244">Редактировать</a>
<span id="panel_244" style="display:none;">
<!-- Панель управления комментарием -->
</span>
</span>

</div>

Имеется jQurey

$('#edit_244').click(function(){
$('#edit_244').toggleClass('edit_hide');
$('#panel_244').toggleClass('panel_look');
})

Этот jQurey находится в каждом блоке комментария. Так вынужден был сделать из-за не знания. Как сделать один скрипт, что бы он мог обрабатывать все комментарии?

Comments

[imdeveloper]

допишите класс в id="edit_244" и при клике с помощью поиска по DOM дереву находите ближайший айди и тригайте

Answer 1

[0xD34F]

Уберите уникальные id, добавьте общие классы.
Если id нужен, положите его в data-атрибут корневого элемента комментария.
Уберите атрибут style, его содержимое разместите в стилях класса соответствующего элемента.
Вместо переключения двух классов у разных элементов переключайте один - у корневого элемента комментария.

<div class="comment" data-id="187">
  <a class="comment-edit">Редактировать</a>
  <span class="comment-panel"></span>
</div>

.comment .comment-panel {
  display: none;
}

.comment.editing .comment-panel {
  display: inline;
}

.comment.editing .comment-edit {
  color: red;
}

const containerSelector = '.comment';
const buttonSelector = '.comment-edit';
const activeClass = 'editing';


// вот вам ваш jquery
$(containerSelector).on('click', buttonSelector, e => {
  const id = $(e.delegateTarget).toggleClass(activeClass).data('id');
  console.log(id);
});

// или, к чёрту jquery
document
  .querySelectorAll(`${containerSelector} ${buttonSelector}`)
  .forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const container = this.closest(containerSelector);
  container.classList.toggle(activeClass);
  const { id } = container.dataset;
  console.log(id);
}

Comments

[Вадим Круглов]

Огромное спасибо, работает! Я думал что как-то через this делается, но не знаю как правильно это собрать. Эх когда я выучу JS и jQuery...

[Пашенька]

Вадим Круглов, jQuery уже поздно учить.

[Вадим Круглов]

like-a-boss, тем не менее знание языка требуется в вакансиях. А какой сейчас перспективный?

[Пашенька]

Вадим Круглов, мы говорим о разном: JavaScript конечно стоит учить, я говорю о том, что уже поздно учить jQuery (это библиотека. ей место в помойке уже)

[Максим]

like-a-boss, почему же ?

[Пашенька]

Максим Ленский, серьёзно? Потому что он ушёл в историю? Потому что в нём уже нет никакой необходимости? Потому что то, для чего он был спроектирован уже хорошо работает out of the box? То, что кто-то там его ещё использует, это как говорится, его проблемы. Это шлейф легаси. Лень.

[Максим]

like-a-boss, 94% его используют - это плохая статистика ?тот же toster на jquery !я не фанат jquery но не понимаю ненависть к нему

[Пашенька]

Максим Ленский, ну так а почему его используют? Кто в здравом уме будет переписывать проекты, уже написанные на жуйквери, многие годы назад? Отсюда и эта сумашедшая статистика по его использованию. Это нужно быть дичайшим энтузиастом и перфекционистом. Если оно работает, так пускай и работает, лучше это время потратить на создание чего-то нового, а вот что-то новое начинать писать на jQuery - это уже максимально странно.
Я не ненавижу jQuery, я сам на нём писал и есть много старого кода, где он у меня до сих пор фигурирует, что-то из этого есть смысл переписать, а что-то – нет.

[Максим]

like-a-boss, аа...ну это аргумент ..просто я думал как всегда в сторону vue, angular, react голос