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

問題は、私がやったことで、私が持っているすべてのリンクに対してホバーとクリック機能を作成する必要があるということです-私はそれを1つのホバー、クリック機能に保ち、$ 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

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 に答える
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 に答える