Question

我正在制作一个“星级”系统，1-5颗星。当第一颗恒星徘徊时，我想要改变那颗恒星的img src。当第二颗星徘徊时，我想要改变星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');

- Documentation

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);   
});

<强> Demo fiddle

此外，您可以使用CSS方式并在悬停时向图像添加类，而不是更改jquery中的src，这样可以更轻松地使用精灵

如何使用jquery更改多个img src

2 个答案: