在正则表达式上添加和删除 SRC 中的文本

Question

我想更改图像的 src

var string = "/images/myimage.png";

在按钮单击我想将_hover添加到myimage(/images/myimage_hover.png(，再次单击按钮单击我想删除_hover'。

有人对此有好主意吗？

Answer 1

您可以使用 Element.setAttribute forsrc属性来应用转换。

const img = document.querySelector('img');
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
let src = img.getAttribute('src');

src = img.isHover ? 
src.replace('_hover', '') :
src.replace('.png', '_hover.png');
img.setAttribute('src', src);
img.isHover = !img.isHover;
});
// Use jquery
console.log('2 + 2 =', $(2+2).get(0))

<img src="https://placehold.it/300x100/000/fff?text=image.png"><hr>
<button>Switch</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>