jQuery会影响与被点击或悬停元素具有相同类的元素

Question

我正在开发一个类似于编写游戏的零件地图的应用程序,当我将某个类别的区域悬停在某个区域时,我需要一个与该区域相同的图像来淡入.

这就是我的工作:

$(document).ready(function() {
    $("area.THECLASS").hover(function() {
         $("img.THECLASS").fadeIn(200);
    }, function() {
         $("img.THECLASS:not(.stay)").fadeOut(200);
    );
});

我将要有很多部件和类,我需要让它工作,以便它可以识别与悬停区域相同的类的img并淡入它.

有没有办法做到这一点？

Answer 1

您可以使用className属性检索分配给元素的类,但是,由于元素可以包含多个类,因此可能会出现歧义,从而阻止您了解要使用的类.

但是,如果您可以保证只有一个班级,请提供以下内容;

$('area').hover(function () {
    var theClass = $(this).prop('className');

    $('img.' + theClass).fadeIn(200);
}, function () {
    var theClass = $(this).prop('className');

    $('img.' + theClass + ':not(.stay)').fadeOut(200);
});

如果存在多个类,您可能需要考虑使用data-* HTML属性;

<area data-target="THECLASS" />

然后在你的代码中;

$('area').hover(function () {
    var theClass = $(this).data('target');

    $('img.' + theClass).fadeIn(200);
}, function () {
    var theClass = $(this).data('target');

    $('img.' + theClass + ':not(.stay)').fadeOut(200);
});

有关详细信息,请参阅有关prop()和data()方法的文档.

此外,由于您绑定了许多元素,因此您可能希望研究和使用事件委派.对于jQuery版本> = 1.7,请参阅on()旧版本delegate().