[英]Using vanilla JS to set image src from data-attribute
我正在尋找一種方法來設置圖像的src
- 在模態中 - 使用可點擊元素的 data 屬性。
元素的標記如下所示(頁面上可能有多個標記):
<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 將是您將點擊綁定到的元素,因此它將是文檔。 第二個問題是駝峰案例確實適用於數據集,您需要使用破折號。
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>
首先檢查target
(即被點擊的元素)是否有工具提示類
event.target.classList.contains('tooltip')
但是隨后您使用currentTarget
(即事件處理程序綁定到的元素: document
)來讀取數據集。
modalImage.src = event.currentTarget.dataset.imageToSet
您需要在整個過程中繼續使用target
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.