javascript - 如何使用javascript更改悬停时的图像源，但适用于每张照片

Question

我想在悬停时更改每个图像的图像源。我将拥有悬停之前存在的原始 url（由 yes.png 表示），以及悬停之后存在的新 url（由 yes2.png 表示）。关键是新的 url 和原来的 url 一样，只是在悬停时添加了 2。我想用javascript完成这个。我是 javascript 的新手，但我该如何添加呢？

造成这种差异的全部原因在于，每张图像的图像来源都不同，但它适用于每张图像。

var url = getElementsByClassName ('card-img-top').src
var newImg = url+2

标签： javascript

Answer 1

你可以相对容易地做到这一点。您可以在字符串中找到 where并在它之前.png插入 a并删除 2 on 。2mouseentermouseout

我不确定您是否只想更改悬停在上面的图像或所有图像，所以我将提供一个如何同时进行的示例。首先，可能是您要查找的内容，我将仅更改悬停在上方的图像：

const imgs = document.getElementsByTagName('img');

[...imgs].forEach(img => {
  img.addEventListener('mouseenter', () => {
    const newSrc = img.src.slice(0, img.src.indexOf('.png')) + 2 + img.src.slice(img.src.indexOf('.png'));
    console.log(newSrc);
    img.src = newSrc;
  })
  img.addEventListener('mouseout', () => {
    const newSrc = img.src.slice(0, img.src.indexOf('.png') - 1) + img.src.slice(img.src.indexOf('.png'));
    console.log(newSrc);
    img.src = newSrc;
  })
});

img {
  height: 100px;
  width: 100px;
}

<img src="pic.png">
<img src="img.png">

其次，只要将鼠标悬停在所有标签上，我都会更改src所有标签：img

const imgs = document.getElementsByTagName('img');

[...imgs].forEach(img => {
  img.addEventListener('mouseenter', () => {
    [...imgs].forEach(img => {
      const newSrc = img.src.slice(0, img.src.indexOf('.png')) + 2 + img.src.slice(img.src.indexOf('.png'));
      console.log(newSrc);
      img.src = newSrc;
    })
  })
  img.addEventListener('mouseout', () => {
    [...imgs].forEach(img => {
      const newSrc = img.src.slice(0, img.src.indexOf('.png') - 1) + img.src.slice(img.src.indexOf('.png'));
      console.log(newSrc);
      img.src = newSrc;
    })
  })
});

img {
  height: 100px;
  width: 100px;
}

<img src="pic.png">
<img src="img.png">