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

您需要使用$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")从您的锚元素中获取data-class的值

Answer 2

使用此选择器

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 3

您可以使用jQuery的每个函数来迭代.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);
});

一个更聪明的方法来做这个jQuery？

3 个答案: