0

我正在一个有大约 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 的任何实例，并在鼠标悬停时进行保留。我认为这可能与正则表达式有关，但我对它们的理解不够好。这可能吗？如果是这样，你能帮我指出正确的方向吗？

谢谢你，杰森。

4

2 回答 2

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');
});
于 2012-08-01T16:55:30.770 回答
1

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/

于 2012-08-01T16:58:38.123 回答