拥有两个类的span的正确选择器

时间:2013-08-04 09:32:05

标签: javascript jquery jquery-selectors

* 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/

2 个答案:

答案 0 :(得分: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(因此所选的类将是bm1bm2而不是{{1当前)

openCurly

Updated Fiddle

答案 1 :(得分:0)

元素只能有一个类属性。它无效,只会应用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可以解决问题。

<强> Check Fiddle

两个事件都可以通过一个选择绑定到选择器。

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