Как изменить несколько img srcs с jquery

Я работаю над системой «звездного рейтинга», 1-5 звезд. Когда 1-я звезда зависнет, я хочу, чтобы изменилась только img src этой звезды. Когда вторая звезда зависнет, я хочу изменить img src как звезды 1, так и звезды 2. Я использую JQuery, но это не работает ... Вот код:Как изменить несколько img srcs с 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>

источник

2013-10-13 Dan w

Вы пробовали использовать CSS ' img a: hover'? – AaronHatton

Второй обработчик ошибочен, добавление свойства 'src' к объекту jQuery не влияет на свойство' 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, который позволит вам использовать спрайты легко

источник

2013-10-13 18:53:26

Как изменить несколько img srcs с jquery

ответ

Смежные вопросы