切換的CSS DIV基於一個自定義屬性

-1

<div class="datumTijd">Speelronde 1</div> 
<div class="clear"></div> 


<div class="thuis wedstrijd" wedstrijdId="1" toto="1" ronde="1">PEC Zwolle</div> 
<div class="vs wedstrijd" wedstrijdId="1" toto="2" ronde="1">X</div> 
<div class="uit wedstrijd" wedstrijdId="1" toto="3" ronde="1">FC Utrecht</div> 
<div class="vsScore">0</div> 

<div class="thuis wedstrijd" wedstrijdId="2" toto="1" ronde="1">sc Heerenveen</div> 
<div class="vs wedstrijd" wedstrijdId="2" toto="2" ronde="1">X</div> 
<div class="uit wedstrijd" wedstrijdId="2" toto="3" ronde="1">FC Dordrecht</div> 
<div class="vsScore">0</div>

當我在一個div上點擊與「wedstrijd」類我切換到不同類

$("#teamStats .wedstrijd").click(function() { 

console.log($(this).attr('wedstrijdId')); 
console.log($(this).attr('toto')); 

$(this).toggleClass("wedstrijdSelected"); 

});

但現在我有一個問題。選定的div應該使用'wedstrijdSelected'類。因此，例如，我點擊PEC Zwolle它的作品。這個div現在正在使用其他類。但是當我點擊FC Utrecht時，他們都使用'wedstrijdSelected'。我如何基於'wedstrijdId'屬性只使用'wedstrijdSelected'一次。

來源

2014-09-03 Rick Weller

Offtopic：不是彌補*無效*屬性，而使用*有效* HTML5 ['數據 - *'屬性（http://html5doctor.com/html5-custom-數據的屬性/）。 – LinkinTED 2014-09-03 15:29:06

由於該類會出現一個兄弟節點上，您可以添加它之前從兄弟姐妹中刪除：

$("#teamStats .wedstrijd").click(function(){ 
    $(this).siblings('.wedstrijdSelected') 
     .removeClass('wedstrijdSelected') 
     .end() 
     .toggleClass('wedstrijdSelected'); 
});

來源

2014-09-03 14:53:56 ajm

喜歡的東西...

$("#teamStats .wedstrijd").not(this).removeClass("wedstrijdSelected");

這將確保它的關閉所有其他元素。這將阻止它取消選擇你想要的項目，即使是納秒。

來源

2014-09-03 14:53:03

首先，您必須從任何可能具有該元素的元素中移除該類，然後將其應用於新元素。

$("#teamStats .wedstrijd").click(function() { 
    console.log($(this).attr('wedstrijdId')); 
    console.log($(this).attr('toto')); 
    $(".wedstrijd").removeClass("wedstrijdSelected"); 
    $(this).toggleClass("wedstrijdSelected"); 
});

來源

2014-09-03 14:53:29 APAD1

你應該添加將它添加到一個前去除所有孩子的wedstrijdSelected類 - 保持它僅存在於

$("#teamStats .wedstrijd").click(function() { 

    console.log($(this).attr('wedstrijdId')); 
    console.log($(this).attr('toto')); 

    $('#teamStats div').removeClass('wedstrijdSelected') 

    $(this).addClass("wedstrijdSelected"); 

});

來源

2014-09-03 14:54:06 shershen

切換的CSS DIV基於一個自定義屬性

回答

相關問題