4

私はこれを理解することができません...

HTML:

<div class="wrap">
    <div>
        <a>OOOO</a>
    </div>

    <img src="./plusminus.png" width="30px" height="30px" alt="PlusMinus" usemap="#plusminus" />
    <map name="plusminus">
      <area class="plus" shape="poly" coords="8,0,12,0,20,11,15,11,15,18,5,18,5,12,0,12,0,9" alt="Plus" href="#" />
      <area class="minus" shape="poly" coords="15,11,26,11,26,16,29,16,29,19,21,29,17,29,11,20,11,18,15,18" alt="Minus" href="#" />
    </map>
</div>

<div class="wrap">
    <div>
        <a>OOOO</a>
    </div>

    <img src="./plusminus.png" width="30px" height="30px" alt="PlusMinus" usemap="#plusminus" />
    <map name="plusminus">
      <area class="plus" shape="poly" coords="8,0,12,0,20,11,15,11,15,18,5,18,5,12,0,12,0,9" alt="Plus" href="#" />
      <area class="minus" shape="poly" coords="15,11,26,11,26,16,29,16,29,19,21,29,17,29,11,20,11,18,15,18" alt="Minus" href="#" />
    </map>
</div>

jQuery:

$(function() { //run when the DOM is ready
    $('a').click(function() {
        $(this).parent().parent().toggleClass('hilight');
    });

    $('.plus').click(function() {
        $(this).parent().parent().toggleClass('hilight');
    });
});

タグはa必要に応じて機能しますが、イメージ マップをクリックすると、クリックされた div ではなく、一番上の div のみが強調表示されます??

4

1 に答える 1

3

問題は、2 つのマップがあり、両方が同じ名前であることです。ブラウザーは、マップ属性が一致する最初の画像に各マップを適用しています。マップに 2 つの一意の名前を使用するように HTML を変更しました。これがあなたのコードの作業バージョンです。

HTML:

<div class="wrap">
    <div>
        <a>OOOO</a>
    </div>

    <img src="./plusminus.png" width="30px" height="30px" alt="PlusMinus" usemap="#plusminus1" />
    <map name="plusminus1">
      <area class="plus" shape="poly" coords="8,0,12,0,20,11,15,11,15,18,5,18,5,12,0,12,0,9" alt="Plus" href="#" />
      <area class="minus" shape="poly" coords="15,11,26,11,26,16,29,16,29,19,21,29,17,29,11,20,11,18,15,18" alt="Minus" href="#" />
    </map>
</div>

<div class="wrap">
    <div>
        <a>OOOO</a>
    </div>

    <img src="./plusminus.png" width="30px" height="30px" alt="PlusMinus" usemap="#plusminus2" />
    <map name="plusminus2">
      <area class="plus" shape="poly" coords="8,0,12,0,20,11,15,11,15,18,5,18,5,12,0,12,0,9" alt="Plus" href="#" />
      <area class="minus" shape="poly" coords="15,11,26,11,26,16,29,16,29,19,21,29,17,29,11,20,11,18,15,18" alt="Minus" href="#" />
    </map>
</div>

JavaScript: (注 - Java ではありません)

$(function() { //run when the DOM is ready
    $('a, .plus').click(function() {
        $(this).closest('.wrap').toggleClass('hilight');
    });
});

また、スクリプトを要約したことにも注意してください。両方のセレクターに同じアクションを適用していたので、単純化して両方のセレクターを使用しました。必要に応じて、元の JavaScript も引き続き機能します。このコードの動作を示す jsfiddle リンクは次のとおりです: http://jsfiddle.net/GzxQR/

提案してくれた @Brewal の功績$('a').closest('.wrap');- これはより単純なコードであり、HTML を変更しても破損する可能性が低くなります。

于 2013-06-14T13:23:41.717 に答える