JQuery: использование наведения для одновременного перемещения нескольких изображений - PullRequest
Новая
       13

JQuery: использование наведения для одновременного перемещения нескольких изображений

2 голосов
/ 28 мая 2010

У меня небольшая проблема, но я немного озадачен.

Я использую следующий код для выполнения ролловеров на моей веб-странице 

$("#mylink1 img").hover(
 function()
 {
  this.src = this.src.replace("_off","_on");
 },
 function()
 {
  this.src = this.src.replace("_on","_off");
 }
);

Это прекрасно работает для отдельных изображений, но я бы хотел перевернуть одно из них и изменить другое. 

<a id="mylink1" href="about.cfm"><img src="images/Home_top_navs/aboutus_manage_off.gif" /></a>

<a id="mylink1" href="about.cfm"><img src="images/Home_top_navs/aboutus_nav2_off.gif" /></a>

Любая помощь будет оценена! Спасибо!

Ответы [ 2 ]

2 голосов
/ 28 мая 2010

Не используйте идентификатор, используйте класс, потому что идентификатор уникален. 

<a class="mylink1" href="about.cfm"><img src="images/Home_top_navs/aboutus_manage_off.gif"  /></a>

<a class="mylink1" href="about.cfm"><img src="images/Home_top_navs/aboutus_nav2_off.gif" /></a>

тогда: 

$(".mylink1 img").hover(
1 голос
/ 28 мая 2010

Изменить id на строку @corroded предлагается. Идентификаторы на странице должны быть уникальными.

Что касается изменения нескольких изображений при наведении курсора на одно изображение, вам необходимо изменить функции наведения и отклонения. В настоящее время они только изменяют атрибут src изображения, в данный момент находящегося над ним. Вместо этого внутри обеих функций вы должны пройтись по каждому изображению и изменить атрибут src. Что-то вроде: 

$("#mylink1 img").hover(
    function() {
        $(".mylink1 img").each(function() {
            this.src = this.src.replace("_off","_on");
        });
    },
    function() {
        $(".mylink1 img").each(function() {
            this.src = this.src.replace("_on","_off");
        });
    }
);

Вы можете избежать дублирования с небольшим карри: 

(function() {
    var images = $(".mylink1 img");

    function imageSwapper(imgs, from, to) {
        return function() {
            imgs.each(function() {
                this.src = this.src.replace(from, to);
            });
        };
    }

    $(images).hover(
        imageSwapper(images, "_off", "_on"),
        imageSwapper(images, "_on", "_off")
    );
})();​
...