1

我的网站上有一张地图，单击区域应该切换一个类，在悬停和单击时，我已经制作了一个 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（这个）？但不确定如何？

4

3 回答 3

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从你的锚元素中获取值
于 2012-06-07T10:37:05.990 回答
0

使用这个选择器

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

}
于 2012-06-07T10:38:36.927 回答
0

您可以使用 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);
});
于 2012-06-07T10:41:52.770 回答