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()方法的文档。

此外，由于您绑定了 lot 元素，因此您可能希望研究并使用事件委派。对于jQuery版本＆gt; = 1.7，请参阅on()，对于旧版本，请参阅delegate()。

Answer 2

尝试以下方法：

$("area").hover(function() {
  $.each(this.className.split(/\s+/)), function(index, value) {
    $("img." + value).fadeIn(200);
 }, function() {
  $.each(this.className.split(/\s+/), function(index, value) {
    $("img." + value + ":not(.stay)").fadeOut(200);
  }
);

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

2 个答案: