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]

Почему не работает как надо - потому что метод 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

Хотите получать актуальное значение именно атрибута - к атрибуту и обращайтесь, пусть везде будет attr:

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

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

А вообще, можно и отказаться от 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()