Javascript 更改特定DOM元素上的src

我有一个无序列表，其中每个列表项都有一个不同的图像（src）

如果我可以直接编辑HTML，我只需要为每个列表项硬编码唯一的onmouseover和onmouseleave属性。我意识到这不是最佳实践，但我并不过分关注为这个特定的项目创造动力（除非有人有任何聪明的想法）

我想知道是否有一个数组方法我应该尝试或以某种方式合并一个“for循环”，然而，我觉得“for循环”遇到了与我上面处理的相同的问题。也许我把这一切都搞错了

---

对于这个问题，我更喜欢纯JavaScript解决方案，但我也愿意听到任何使用JQuery的解决方案。非常感谢您的帮助。谢谢

内联事件处理程序本质上是HTML标记内部的

eval

——它们是一种不好的做法，会导致代码分解不良，难以管理

我建议使用JavaScript迭代元素，并使用

---

然后你可以一次列出所有新的

src

s，你只需要使用一个迭代函数，而不是每个元素使用两个。

这里有一个指向我的代码笔的链接，如果它有帮助的话：漂亮、干净的解决方案。当然，现在看来很明显，哈哈。你就是那个人！多谢各位！

const hoverImages = ['https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=7940438',  
'https://img.washingtonpost.com/news/morning-mix/wp- 
content/uploads/sites/21/2015/06/sleepy-face.png', ... ] 


document.querySelectorAll('.sortable-listing-image > img.internal').forEach((img, i) => {   
const origImageSrc = img.src;   
    img.addEventListener('mouseover', () => img.src = hoverImages[i]);   
    img.addEventListener('mouseleave', () => img.src = origImageSrc); });

<img alt="Payments" onmouseover="invert(this)" onmouseleave="revert(this)" class="internal" src="https://buildahead.com/wp-content/uploads/2017/02/happy-emoji-smaller-300x300.png"></img>
...
<img alt="Invoice" onmouseover="invert1(this)" onmouseleave="revert1(this)" class="internal" src="https://buildahead.com/wp-content/uploads/2017/02/happy-emoji-smaller-300x300.png"></img>

var listItem = document.querySelector(".sortable-listing");    
var thumbnail = document.querySelector(".sortable-listing-image img.internal");

  if(listItem.dataset.pageId == '563') {
      thumbnail.setAttribute("onmouseover", "invert(this)");
      thumbnail.setAttribute("onmouseleave", "revert(this)");
  } else if (listItem.dataset.pageId == '561') {
      thumbnail.setAttribute("onmouseover", "invert1(this)");
      thumbnail.setAttribute("onmouseleave", "revert1(this)");
  }

// Image 1
function invert(image) {
  image.src = "https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=7940438";
}
function revert(image) {
  image.src = "https://buildahead.com/wp-content/uploads/2017/02/happy-emoji-smaller-300x300.png";
}

// Image 2
function invert1(image) {
  image.src = "https://img.washingtonpost.com/news/morning-mix/wp-content/uploads/sites/21/2015/06/sleepy-face.png";
}
function revert1(image) {
  image.src = "https://images-na.ssl-images-amazon.com/images/I/51zLZbEVSTL._SY355_.jpg";
}

const hoverImages = [
  'https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=7940438',
  'https://img.washingtonpost.com/news/morning-mix/wp-content/uploads/sites/21/2015/06/sleepy-face.png',
  // ...
]

document.querySelectorAll('.sortable-listing-image > img.internal').forEach((img, i) => {
  const origImageSrc = img.src;
  img.addEventListener('mouseover', () => img.src = hoverImages[i]);
  img.addEventListener('mouseleave', () => img.src = origImageSrc);
});

const hoverImages = ['https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=7940438',  
'https://img.washingtonpost.com/news/morning-mix/wp- 
content/uploads/sites/21/2015/06/sleepy-face.png', ... ] 


document.querySelectorAll('.sortable-listing-image > img.internal').forEach((img, i) => {   
const origImageSrc = img.src;   
    img.addEventListener('mouseover', () => img.src = hoverImages[i]);   
    img.addEventListener('mouseleave', () => img.src = origImageSrc); });