jquery - 如何使用 jquery 更改多个 img src

Question

我正在研究一个“星级”系统，1-5 星。当第一颗星悬停时，我只想改变那颗星的 img src 。当第 2 颗星星悬停时，我希望星星 1 和星星 2 的 img src 都发生变化。我正在使用 jquery，但它不工作......这是代码：

<script>
$('#imgstar').hover(function () {
    this.src = '/dev/images/rate_video_icon_yellow.png';
}, function () {
    this.src = '/dev/images/rate_video_icon.png';
});

$('#imgstar2').hover(function () {
    $("#imgstar, #imgstar2").src = '/dev/images/rate_video_icon_yellow.png';
}, function () {
    $("#imgstar2").src = '/dev/images/rate_video_icon.png';
});
</script>

Answer 1

你不会像这样使用 jQuery。

$("#imgstar, #imgstar2").src = '/dev/images/rate_video_icon_yellow.png';

应该是这样的

$("#imgstar, #imgstar2").attr('src', '/dev/images/rate_video_icon_yellow.png');

--文档

Answer 2

您可以使用prevAll()选择元素的所有前面的兄弟姐妹，因此您不必多次重复您的代码，您可以为您的图像提供一个 coomon 类并执行以下操作：

var $rateStars = $('.rate-star'),
    emptySrc = '/dev/images/rate_video_icon.png',
    fullSrc = '/dev/images/rate_video_icon_yellow.png'

$rateStars.hover(function(){
    var $this = $(this);
    $this.add($this.prevAll()).attr('src',fullSrc);
},function(){
    $rateStars.attr('src',emptySrc);   
});

演示小提琴

您也可以采用 CSS 方式并在悬停时为图像添加一个类，而不是更改 jquery 中的 src，这将使您更轻松地使用精灵