Question

我正在尝试在对象上执行鼠标悬停时略微淡化，在这种情况下，我正在制作照片库，每张照片都有ID“fotoblok”和动态类（“foto”+ photonumber，例如：foto1或foto55）

$("#fotoblok").mouseover(function(){
$(this).animate({opacity: 0.5});
});

$("#fotoblok").mouseout(function(){
$(this).animate({opacity: 1});
});

这是我目前的jQuery代码，但这只会更改第一张照片而不是所有后续照片，实现此目的的最佳方式是什么？

Answer 1

首先，id必须是唯一的..但是类可以是欺骗..

您设计的标记设计得很糟糕。但无论如何，你会使用事件委派：

$('[class^="foto"]').on({
    mouseover: function() {
        $(this).animate({
            opacity: 0.5
        });
    }
    mouseout: function() {
        $(this).animate({
            opacity: 1
        });
    }
})

Answer 2

您可以使用不同的JQuery选择器。试试这个：

$("div[id^='foto'],div[id*=' foto']")

这将找到以＆＃34; foto＆＃34;开头的课程。以及包含＆＃34; foto＆＃34;

的类

Answer 3

ID应该是唯一的：它指的是一个元素。

类引用多个元素，应该在这种情况下使用。

因此，您的图片应该都有fotoblok作为类：

<img class="fotoblock"/>

然后，请参阅事件处理程序中的类：

$(".fotoblok").mouseover(function(){
    $(this).animate({opacity: 0.5});
});

$(".fotoblok").mouseout(function(){
    $(this).animate({opacity: 1});
});

此外，这是重复的代码。要简化它，请使用.hover()来处理mouseenter和mouseexit个事件：

$(".fotoblok").hover(function(){
    $(this).animate({opacity: 0.5});
}),function(){
    $(this).animate({opacity: 1});
});

jQuery鼠标悬停在动态对象上

3 个答案: