2

*HTML

<div id='board'>
<div>
    abc<span class='openCurly bm1'>{</span>
</div>
<div>
    'jkl'm<span  class='openParen bm2' >(</span>no<span class='closeParen bm2'>)</span>
</div>
<div>
    <span class= 'closeCurly bm1'>}</span>
</div>

*JS

$(document).ready(function() {
    $("#board").on("mouseenter mouseover", "[class*=bm]", function() {
        var className = $(this).attr('class').split(" ")[0];
        $("." + className).addClass("curlyHighlight");
    });
    $("#board").on("mouseleave mouseout", "[class*=bm]", function() {
        var className = $(this).attr('class').split(" ")[0];
        $("." + className).removeClass("curlyHighlight");
    });
});

*CSS

.curlyHighlight {
background-color: red;
font-weight: bold;

}

{ または } にカーソルを合わせると、両方 (パートナー) が強調表示されます。( または ) のいずれかにホバリングするのと同じことです。ここに私のフィドルがありますhttp://jsfiddle.net/yxVd9/10/

4

2 に答える 2

1

私があなたの考えを正しく理解していれば、対応するブラケットを強調表示しようとしています。あなたのコードで何かを指摘します。

まず、あなたのclassプロパティは有効ではありません。それらを 1 つの場所に結合する必要があります。

<div id='board'>
    <div>
        abc<span class='openCurly bm1'>{</span> <!-- an example of merged classes -->
    </div>
    <div>
        'jkl'm<span  class='openParen bm2' >(</span>no<span class='closeParen bm2'>)</span>
    </div>
    <div>
        <span class= 'closeCurly bm1'>}</span>
    </div>
</div>

第二に、効果を適用するために間違ったクラスを選択したと思います。正しいインデックスは次のようになるはずです1（したがって、選択されたクラスは現在の代わりにbm1orになります）bm2openCurly

$(document).ready(function() {
    $("#board").on("mouseenter mouseover", "[class*=bm]", function() {
        var className = $(this).attr('class').split(" ")[1]; // index 1 instead of 0
        $("." + className).addClass("curlyHighlight");
    });
    $("#board").on("mouseleave mouseout", "[class*=bm]", function() {
        var className = $(this).attr('class').split(" ")[1]; // index 1 instead of 0
        $("." + className).removeClass("curlyHighlight");
    });
});

更新されたフィドル

于 2013-08-04T09:43:16.520 に答える
0

要素に対してクラスの属性を 1 つだけ持つことができます。これは無効であり、class 属性の最初のインスタンスのみが適用されます。

<span class='closeParen' class='bm2'>)<

察するに ：

    <span class='closeParen  bm2'>)<

セレクターに関しては、これを使用できます：

`$('.closeParen.bm2')` to select the span

最初に HTML を修正します。これが好きなはずです：

<div id='board'>
    <div>
       abc<span class='openCurly bm1'>{</span>
    </div>
    <div>
     'jkl'm<span  class='openParen bm2' >(
         </span>no<span class='closeParen bm2'>)</span>
    </div>
    <div>
       <span class= 'closeCurly bm1'>}</span>
    </div>
</div>

JS

thisクラスを見つける代わりに、コンテキストを使用して要素を参照できます。

$(document).ready(function() {
    $("#board").on("mouseenter mouseover", "[class*=bm]", function() {
        $(this).addClass("curlyHighlight");
    });
    $("#board").on("mouseleave mouseout", "[class*=bm]", function() {
        $(this).removeClass("curlyHighlight");
    });
});

あなたが書いた方法の問題は、クラスを使用して要素を直接選択していることです。そのため、ホバーされている要素に関係なく、そのクラスのすべての要素が選択されます。を使用thisすると、問題に対処する必要があります。

フィドルをチェック

両方のイベントを単一の選択でセレクターにバインドできます。

$(document).ready(function () {
     $("#board").on({
      mouseenter: function () {
          $(this).addClass("curlyHighlight");
      },
      mouseleave: function () {
          $(this).removeClass("curlyHighlight");
      }
        }, "[class*=bm]");
     });
});
于 2013-08-04T09:37:50.480 に答える