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财产无效，您应该将它们合并到一个地方。

<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（所以选择的类将是bm1orbm2而不是openCurlyas current）

$(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

元素只能有一个类属性。它是无效的，并且只会应用类属性的第一个实例。

<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 回答