一种更聪明的方式来实现jQuery？

我在我的网站上有一个地图，点击一个类应该被切换的区域，在鼠标悬停和点击上，我已经做了一个jQuery解决方案来做到这一点，但是，我认为它可以做得比我做的更聪明一点？我的HTML输出如下：

<div class="mapdk">
                <a data-class="nordjylland" class="nordjylland" href="#"><span>Nordjylland</span></a>
                <a data-class="midtjylland" class="midtjylland" href="#"><span>Midtjylland</span></a>
                <a data-class="syddanmark" class="syddanmark" href="#"><span>Syddanmark</span></a>
                <a data-class="sjaelland" class="sjalland" href="#"><span>Sjælland</span></a>
                <a data-class="hovedstaden" class="hovedstaden" href="#"><span>Hovedstaden</span></a>
            </div>

---

问题是，通过我所做的，我必须为我得到的每个链接创建一个悬停和单击功能-我想我可以将它保留在一个悬停和单击功能中，然后使用类似$jq的东西（这个）？但不确定如何使用？

您需要使用

$jq（this）

$jq（this）

引用调用事件侦听器的元素

例如：

$jq(".mapdk a").hover(function () {
        $jq(this).parents(".mapdk").toggleClass($jq(this).data("class"));
    }).click(function () {
        $jq(this).parents(".mapdk").toggleClass($jq(this).data("class"));
    });

要分解它：

• $jq（this）

  调用悬停的元素（即锚元素）

• .parents（“.mapdk”）

  查找类为

  .mapdk

• $jq（this）.data（“class”）

  从锚元素获取

  数据类的值

---

您需要使用

$jq（this）

$jq（this）

引用调用事件侦听器的元素

例如：

$jq(".mapdk a").hover(function () {
        $jq(this).parents(".mapdk").toggleClass($jq(this).data("class"));
    }).click(function () {
        $jq(this).parents(".mapdk").toggleClass($jq(this).data("class"));
    });

要分解它：

• $jq（this）

  调用悬停的元素（即锚元素）

• .parents（“.mapdk”）

  查找类为

  .mapdk

• $jq（this）.data（“class”）

  从锚元素获取

  数据类的值

使用此选择器

if ($jq(".area .mapdk").length) {
    $jq(".mapdk a").hover(function () {
        $jq(".mapdk").toggleClass($jq(this).attr("class"));
    }).click(function () {
        $jq(".mapdk").toggleClass($jq(this).attr("class"));
    });

}

使用此选择器

if ($jq(".area .mapdk").length) {
    $jq(".mapdk a").hover(function () {
        $jq(".mapdk").toggleClass($jq(this).attr("class"));
    }).click(function () {
        $jq(".mapdk").toggleClass($jq(this).attr("class"));
    });

}

---

可以使用jQuery的each函数迭代.mapdk中的所有锚定标记

免责声明我假设您只希望设置parent.mapdk的类。如果您有多个类（不是锚的父类），那么下面的代码将不能作为您的代码使用，但我假设您不希望为all.mapdk设置类，无论您悬停/单击哪个锚

//Since the function is the same for all event handlers let's just declare that once
var handler = function () {
        var $this = $jq(this);
        $this.parents(".mapdk").toggleClass($this.attr("class"));
};
//find all the anchor tags within .mapdk that has a class specified
$jq(".mapdk a[class]").each(function{
    this.hover(handler).click(handler);
});

---

可以使用jQuery的each函数迭代.mapdk中的所有锚定标记

免责声明我假设您只希望设置parent.mapdk的类。如果您有多个类（不是锚的父类），那么下面的代码将不能作为您的代码使用，但我假设您不希望为all.mapdk设置类，无论您悬停/单击哪个锚

//Since the function is the same for all event handlers let's just declare that once
var handler = function () {
        var $this = $jq(this);
        $this.parents(".mapdk").toggleClass($this.attr("class"));
};
//find all the anchor tags within .mapdk that has a class specified
$jq(".mapdk a[class]").each(function{
    this.hover(handler).click(handler);
});

---

你仍然需要为锚的每一个类设置一个tags@RuneFS我不确定你的评论是否仍然相关？在我完成doh之前，我保存了我的答案！不是：）但是你还有两个问题。OP使用的是

$jq

而不是

$

，因此您的

$（此）

在他这方面可能有不同的含义，并且您（可能）没有在与OP相同的元素集上切换类。然而，正如我在回答中所指出的，我相信这是OP代码中的一个bug，对于锚的每个类，仍然必须有一个bugtags@RuneFS我不确定你的评论是否仍然相关？在我完成doh之前，我保存了我的答案！不是：）但是你还有两个问题。OP使用的是

$jq

而不是

$

，因此您的

$（此）

在他这方面可能有不同的含义，并且您（可能）没有在与OP相同的元素集上切换类。然而，正如我在回答中指出的，我认为这是OP代码中的一个错误。为什么您指定了数据类属性，这只是一个遗留的东西，不再需要它：）为什么您指定了数据类属性，这只是一个遗留的东西，不再需要它：）