为元素组中的活动元素切换样式

给定一组没有目标属性的元素（例如，下面的代码），设置所选元素的高亮样式而不设置相同样式的最有效的方法是什么以前选择的元素？为元素组中的活动元素切换样式

<div id="uno" class="element_parent"> 
    <a href="#" class="element">ONE</div> 
</div> 
<div id="dos" class="element_parent"> 
    <a href="#" class="element">ONE</div> 
</div> 
<div id="tres" class="element_parent"> 
    <a href="#" class="element">ONE</div> 
</div>

来源

2013-05-19 Fellow Stranger

我想补充和点击锚删除类，像这样：

$('.element').on('click', function(e) { 
    e.preventDefault(); 
    $(this).addClass('active') 
      .closest('div') 
      .siblings('div') 
      .find('a') 
      .removeClass('active') 
});

CSS

.active {color: red;} /* or whatever */

或：

$('.element').on('click', function(e) { 
    e.preventDefault(); 
    $('.element.active').removeClass('active'); 
    $(this).addClass('active'); 
});

来源

2013-05-19 22:25:18 adeneo

这个答案似乎涉及多个DOM遍历比其他人。这是最有效的方法吗？ – 2013-05-19 22:35:27

@bratman - 这取决于，我并不特别喜欢仅仅删除具有某个类的所有元素上的类，但我宁愿确保我要定位的元素在某个特定的元素组中。我将添加另一种选择是“更短”，但并不是更高效，因为添加，删除和选择类需要在jQuery中进行更多的内部解析，而不仅仅是在DOM中向上迈进一步。 – adeneo

喜欢的东西：

$(".element").click(function() { 
    $(".element").removeClass("active"); 
    $(this).addClass("active"); 
});

来源

2013-05-19 22:25:20 tymeJV

$('.element').on('click',function(e){ 
    $(this).addClass('active'); 
    $('.element').not($(this)).removeClass('active'); 
});

来源

2013-05-19 22:29:55

为元素组中的活动元素切换样式

回答

相关问题