* 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/
答案 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
(因此所选的类将是bm1
或bm2
而不是{{1当前)
openCurly
答案 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]");
});
});