如何用jquery更改多個img srcs

我正在使用「星級評分」系統，1-5星。當第一顆星星盤旋時，我只想要那個星星的img src改變。當第二顆星被徘徊的時候，我想讓星星1和星星2的img src改變。我正在使用jquery，但它不工作...這裏是代碼：如何用jquery更改多個img srcs

<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>

來源

2013-10-13 Dan w

您是否嘗試過使用CSS' img a：懸停'？ – AaronHatton

第二個處理程序是錯誤的，向jQuery對象添加'src'屬性不會影響所選元素的src'屬性，您應該使用'.attr（）'或'.prop（）'方法。 – undefined

另外，你應該看看使用精靈的圖像是類似的 –

你不這樣使用jQuery。

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

它必須是這樣的

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

- Documentation

來源

2013-10-13 18:43:53 iConnor

工作......謝謝！ –

@Danw檢查我的答案，它有一個更有效的方法來解決您的問題，而不是重複多次代碼 –

您可以使用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的，這將讓你使用精靈更容易

來源

2013-10-13 18:53:26

如何用jquery更改多個img srcs

回答

相關問題