Как в jquery вывести именно тот data атрибут по которому щелкнули?

Question

[Виктор Викторов]

Есть два кода:

<ul class="va-city-list">
	<li><a class="list-city" data-city="Санкт-Петербкрг" href="#">Санкт-Петербкрг</a></li>
	<li><a class="list-city" data-city="Нижний Новгород" href="#">Нижний Новгород</a></li>
	<li><a class="list-city" data-city="Самара" href="#">Самара</a></li>
	<li><a class="list-city" data-city="Екатеринбург" href="#">Екатеринбург</a></li>
</ul>

и

$('.list-city').on('click', function() {
	$(".va-active-city").text($(".list-city").data("city"));
	alert($(".list-city").data("city"));
});

Выводит всегда первый город, а нужно чтоб именно тот, по которому щелкнули, предполагаю, что тут нужно использовать ключевое слово this, но не умею.

Answer 1

[0xD34F]

$('.va-city-list').on('click', '.list-city', function() {
  console.log($(this).data('city'));
});

или

$('.list-city').click(e => console.log($(e.target).attr('data-city')));

или

document.querySelector('.va-city-list').addEventListener('click', e => {
  const { city } = e.target.dataset;
  if (city) {
    console.log(city);
  }
});

или

const onClick = e => console.log(e.target.getAttribute('data-city'));
document.querySelectorAll('.list-city').forEach(n => n.addEventListener('click', onClick));

или

for (const n of document.getElementsByClassName('list-city')) {
  n.onclick = onClick;
}

function onClick() {
  console.log(this.attributes['data-city'].value);
}