爲元素組中的活動元素切換樣式

給定一組沒有目標屬性的元素（例如，下面的代碼），設置所選元素的高亮樣式而不設置相同樣式的最有效的方法是什麼以前選擇的元素？爲元素組中的活動元素切換樣式

<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

爲元素組中的活動元素切換樣式

回答

相關問題