Question

我正在一个有大约100张图片的网站上工作。图像都有浅色和深色版本。灯具有字符串_lt，黑色具有字符串_dk。我的代码可以手动更改图像。

$('img#devbprnt').mouseover(function() {
$('img#devbprnt').attr('src', 'Images/btn_devbprnt_dk.png');    
});
$('img#devbprnt').mouseout(function() {
$('img#devbprnt').attr('src', 'Images/btn_devbprnt_lt.png');    
});

理想情况下，我想要做的是使用$（'img'）作为选择器以及鼠标悬停时_lt到_dk的任何实例，并在mouseout上执行保留。我认为这可能是正则表达式，但我不太了解它们。这可能吗？如果是这样，你能指点我正确的方向吗？

谢谢你，杰森。

Answer 1

正如其他人所指出的，这应该通过CSS完成。

如果由于某些原因无法完成，请按照以下步骤在JavaScript中执行此操作：

$('img[src$="_lt.png"]').hover(function() {
    this.src = this.src.replace(/lt\.png$/, 'dk.png');
}, function() {
    this.src = this.src.replace(/dk\.png$/, 'lt.png');
});

Answer 2

jQuery还提供hover()函数来执行此操作，

var dark = new RegExp('_dk$'),
    light = new RegExp('_lt$');
$('img').hover(function(){
   var image = $(this);
   image.attr('src', image.attr('src').replace(dark, '_lt'));
},
function(){
   var image = $(this);
   image.attr('src', image.attr('src').replace(light, '_dk'));
});

http://jsfiddle.net/qj5rw/

使用jQuery和Regex来更改所有图像SRC属性？

2 个答案: