Использование vanilla JS для установки изображения sr c из data-attribute - PullRequest
Новая
       5

Использование vanilla JS для установки изображения sr c из data-attribute

0 голосов
/ 03 марта 2020

Я ищу способ установить src изображения - в модальном режиме - с использованием атрибута данных кликабельного элемента.

Разметка для элемента выглядит следующим образом (возможно, быть кратным из них на странице): 

<span class="tooltip" data-imageToSet="someimage.jpg">Click me</span>
<div id="modal">
  <img id="image" src="placeholder.jpg" />
</div>
<script>
  var modal = document.getElementById('modal'),
    modalImage = document.getElementById('image');

  document.addEventListener('click', function(event) {
    if (event.target.classList.contains('tooltip')) {
      modal.classList.toggle('shown');
      modalImage.src = event.currentTarget.dataset.imageToSet;
    }
  });
</script>

Из того, что я читал, это должно работать? Но я получаю консольную ошибку: 

Uncaught TypeError: Cannot read property 'imageToSet' of undefined at HTMLDocument.<anonymous> ((index):1)

Ответы [ 2 ]

1 голос
/ 03 марта 2020

У вас есть две проблемы. currentTarget будет элементом, к которому вы привязали клик, так что это будет документ. Вторая проблема - дело верблюда, работает с набором данных, вам нужно использовать da sh. 

var modal = document.getElementById('modal'),
  modalImage = document.getElementById('image');

document.addEventListener('click', function(event) {
  if (event.target.classList.contains('tooltip')) {
    modal.classList.toggle('shown');
    console.log(event.target)
    modalImage.src = event.target.dataset.imageToSet;
  }
})
<span class="tooltip" data-image-to-set="http://placekitten.com/300/300">Click me</span>


<div id="modal">
  <img id="image" src="http://placekitten.com/g/200/300" />
</div>
0 голосов
/ 03 марта 2020

Сначала вы проверяете, имеет ли target (т.е. элемент, по которому щелкают) класс всплывающей подсказки 

event.target.classList.contains('tooltip')

Но затем вы используете currentTarget (то есть элемент к которому привязан обработчик событий: document) для чтения набора данных. 

modalImage.src = event.currentTarget.dataset.imageToSet

Вам необходимо продолжать использовать target на всем протяжении.

...