一种更聪明的方式来做这件事，jQuery？

Question

我在我的网站上有一个地图，点击区域一个类应该被切换，在悬停和点击时，我已经做了一个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>

我的jQuery看起来像这样：

if ($jq(".area .mapdk").length) {
    $jq(".mapdk a.nordjylland").hover(function () {
        $jq(".mapdk").toggleClass("nordjylland");
    }).click(function () {
        $jq(".mapdk").toggleClass("nordjylland");
    });
    $jq(".mapdk a.midtjylland").hover(function () {
        $jq(".mapdk").toggleClass("midtjylland");
    }).click(function () {
        $jq(".mapdk").toggleClass("midtjylland");
    });
}

问题是，在我所做的事情中，我必须为我得到的每个链接创建一个悬停和单击函数-我在想我可以将它保持在一个悬停状态，单击函数，然后使用$jq(这)之类的东西？但是不确定是怎么做的？

Answer 1

使用此选择器

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

}

Answer 2

您需要使用$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)调用悬停的元素(即.锚element).
• .parents(".mapdk")查找具有类.mapdk
• $jq(this).data("class")的第一个父类，并从锚元素

中获取data-class的值

Answer 3

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

免责声明我假设你只希望设置父.mapdk的类。如果你有多个类(不是锚的父类)，那么下面的代码将不会作为你的代码工作，但我假设你不会想要为所有的.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);
});