我想將滑鼠懸停在 div 上并使用其獨特的資料屬性來更改頁面上其他位置的 img 的 src。因此，您瀏覽串列，并且 url 會根據它懸停在哪個 div 上而發生變化。到目前為止，我的方法是將滑鼠懸停事件附加到我的所有串列元素并每次觸發一個函式，該函式將獲取當前懸停在元素上的資料屬性。但它不起作用，我覺得我從錯誤的角度接近這個問題。我知道這很容易通過使用幾行 jquery 來解決，但我不想使用它，因為我只需要它。有一種方法可以在普通的舊 javascript 中做到這一點，對吧？
const workThumb = document.querySelectorAll('#work-thumb');
const works = document.querySelectorAll('.work-list').forEach(item => {
item.addEventListener('mouseover', event => {
var src = this.getAttribute('data-thumb');
workThumb.setAttribute("src", url);
})
})
<a class="work-list" data-thumb="http://url.to/test.jpg">
<a class="work-list" data-thumb="http://url.to/test.jpg">
<a class="work-list" data-thumb="http://url.to/test.jpg">
[...]
<img id="work-thumb" src="test.jpg">
uj5u.com熱心網友回復：
使用querySelector（不是querySelectorAll）：
作業示例...
const workThumb = document.querySelector('#work-thumb')
document.querySelectorAll('.work-list').forEach( item =>
{
item.onmouseover = () => workThumb.src = item.dataset.thumb
}) a {
display : block;
margin : .3em;
cursor : pointer;
}<a class="work-list" data-thumb="https://via.placeholder.com/150x100/ff0000">ITEM-1</a>
<a class="work-list" data-thumb="https://via.placeholder.com/150x100/00ff00">ITEM-2</a>
<a class="work-list" data-thumb="https://via.placeholder.com/150x100/0000ff">ITEM-3</a>
<img id="work-thumb" src="https://via.placeholder.com/150/" alt="">uj5u.com熱心網友回復：
我清理了您的代碼，在這里您有作業示例。<a>標簽用于鏈接，而不是串列元素，請<ul> <li></li> </ul>改用。
看看我的演示。將滑鼠懸停在每個專案上，影像源將發生變化。
const workThumb = document.getElementById('work-thumb');
const works = document.querySelectorAll('.work-list');
works.forEach(item => {
item.addEventListener('mouseover', event => {
workThumb.src = event.target.dataset.thumb;
});
});<ul>
<li class="work-list" data-thumb="https://via.placeholder.com/150x100/ff0000">ITEM-1</li>
<li class="work-list" data-thumb="https://via.placeholder.com/150x100/00ff00">ITEM-2</li>
<li class="work-list" data-thumb="https://via.placeholder.com/150x100/0000ff">ITEM-3</li>
</ul>
<img id="work-thumb" src="https://via.placeholder.com/150x100/" alt="">轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/463846.html
標籤：javascript html
上一篇：如何讓頁面在一定時間后回到開頭？