Блог

Главная - Вопросы по программированию - jquery — изменение IMG src при опрокидывании

jquery — изменение IMG src при опрокидывании

#jquery #image #attr #closest

#jquery #изображение #attr #ближайший

Вопрос:

У меня есть следующий код: (здесь есть скрипка)

 <img class="changeable" src="http://placehold.it/100x120amp;text=anniversary">
    <ul class="rollover_list">
        <li><a href="#" rel="http://placehold.it/100x120amp;text=anniversary"><span class="orange">> </span>Anniversary</a></li>
        <li><a href="#" rel="http://placehold.it/100x120amp;text=birthday"><span class="orange">> </span>Birthday</a></li>
        <li><a href="#" rel="http://placehold.it/100x120amp;text=christmas"><span class="orange">> </span>Christmas</a></li>
        <li><a href="#" rel="http://placehold.it/100x120amp;text=wedding"><span class="orange">> </span>Wedding</a></li>
    </ul>

и я пытаюсь изменить атрибут src изображения на основе значения rel привязки.

Я пытаюсь выполнить этот jquery —

 $("ul.rollover_list li a").hover(function() {
            var $link = $(this).attr('rel');
            var $target = $(this).closest('img.changeable');
            $($target).attr('src', $link);
        });

поскольку мне нужно использовать его несколько раз на странице.

Правильно ли я понимаю, что .closest() найдет ближайший соответствующий элемент, пройдя вверх по DOM?

Не знаю, чего мне не хватает, но это не радует.

Комментарии:

1. $target это уже объект jQuery, вам не нужно повторно $($target) запрашивать его. Кроме того, в чем именно ваша проблема? Что делает тебя несчастным?

Ответ №1:

Эта строка, которая отображается как…

 $($target).attr('src', $link);

вероятно, должно быть…

 $target.attr('src', $link);

Комментарии:

1. Это не полностью решает проблему, все еще существует проблема с jquery.closest методом, который она использует.

Ответ №2:

У вас есть 2 проблемы в вашем jQuery:

  1. closest() Другими словами, метод jQuery работает только в деревьях: он будет работать только в том случае, если желаемый результат является родительским для текущего элемента.
  2. $($target) . $target уже является элементом, вы не можете выбрать элемент, используя элемент в качестве селектора, для этого вам понадобится метод, подобный find однако, это не то, что вы пытались сделать.

http://jsfiddle.net/U7SNz/2/

Комментарии:

1. Это именно то, что я пытаюсь сделать, но у меня будет много таких на странице, поэтому мне нужна версия, которая просто найдет img.changeable, ближайший к ul. Есть ли у вас какие-либо предложения относительно того, как я мог бы это сделать? Приветствуются любые советы!

2. если он всегда упорядочен таким образом, это просто : $(this).closest('ul').prev() : jsfiddle.net/U7SNz/3