Jquery, как получить значение атрибута после его изминения?

Question

[Levelse]

Условно есть код 2 кнопки с атрибутами, которые подставляются к атрибуту третьей кнопки, после третья кнопка, которая должна вывести этот атрибут. Но выдает "empty string".

<p class="paskal" data-video="bNwEHzce54Q"></p>
<p class="paskal" data-video="br87WXibQE8"></p>
<button class="play" data-play=""></button>

$(document).ready(function() {
  
  $(".paskal").click(function(event){
     video = $(this).data('video');
     $('.play').attr('data-play', video);
  });

  $('.play').click(function(e) {
	 	atplay = $(this).data('play');
	 	console.log(atplay);
  });

});

Answer 1

[0xD34F]

Надо заменить:

- $('.play').attr('data-play', video);
+ $('.play').data('play', video);

или

- video = $(this).data('video');
+ video = $(this).attr('data-video');

- atplay = $(this).data('play');
+ atplay = $(this).attr('data-play');

То есть, работайте всегда через data, или всегда через attr. Потому что при использовании метода data обращение к data-атрибутам выполняется только один раз:

data-* attributes are used to initialize jQuery data. An element's data-* attributes are retrieved the first time the data() method is invoked upon it, and then are no longer accessed or mutated

А вообще, можно и отказаться от jquery:

const play = document.querySelector('.play');

document.querySelectorAll('.paskal').forEach(function(n) {
  n.addEventListener('click', this);
}, e => play.dataset.play = e.currentTarget.dataset.video);

play.addEventListener('click', e => {
  console.log(e.currentTarget.dataset.play);
});

Comments

[Виталий Першин]

или prop()