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()。

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);
  }
);