使用 vanilla JS 从数据属性设置图像 src

Question

我正在寻找一种方法来设置图像的 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)

Answer 1

首先检查 target（即被点击的元素）是否有工具提示 class

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

但随后您使用 currentTarget（即事件处理程序绑定到的元素：document）读取数据集。

modalImage.src = event.currentTarget.dataset.imageToSet

您需要在整个过程中继续使用 target。

Answer 2

你有两个问题。 currentTarget 将是您将点击绑定到的元素，因此它将是文档。第二个问题是驼峰式大小写确实适用于数据集，你需要使用破折号。

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>

使用 vanilla JS 从数据属性设置图像 src

Using vanilla JS to set image src from data-attribute

javascript

custom-data-attribute