Как в 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]

Где и что надо получить:

const containerSelector = '.va-city-list';
const key = 'city';
const attr = `data-${key}`;
const attrSelector = `[${attr}]`;
const itemSelector = `${containerSelector} ${attrSelector}`;

Как достать из элемента значение атрибута:

const getVal = el => $(el).data(key);
// или
const getVal = el => $(el).attr(attr);
// или
const getVal = el => el.dataset[key];
// или
const getVal = el => el.getAttribute(attr);
// или
const getVal = el => el.attributes[attr].value;

Слушать клики можно непосредственно на элементах, содержащих атрибуты:

$(itemSelector).click(e => console.log(getVal(e.currentTarget)));

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => console.log(getVal(e.currentTarget)));

Или можно назначить обработчик клика один раз - общему предку элементов:

$(containerSelector).on('click', attrSelector, function() {
  console.log(getVal(this));
});

// или

document.querySelector(containerSelector).addEventListener('click', e => {
  const el = e.target.closest(itemSelector);
  if (el) {
    console.log(getVal(el));
  }
});