我正在寻找一种使用可点击元素的 data 属性在模式中设置图像的 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)
最佳答案
您有两个问题。 currentTarget 将是您将点击绑定(bind)到的元素,因此它将是文档。第二个问题是驼峰式大小写确实适用于数据集,您需要使用破折号。
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>
关于javascript - 使用 vanilla JS 从数据属性设置图像 src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60514798/