Jquery 基于自定义属性将css切换为div

我在一个页面中有多个div都使用相同的css

<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应使用“wedstrijdSelected”类。例如，我点击peczwolle，它就可以工作了。这个div现在正在使用另一个类。但当我点击FC乌得勒支时，他们都使用了“wedstrijdSelected”。如何基于“wedstrijdId”属性仅使用“wedstrijdSelected”一次。

类似于

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

---

这将确保所有其他元素都处于禁用状态。这将阻止它取消选择您想要的项目，即使是一纳秒。

首先，您必须从可能包含该类的任何元素中删除该类，然后将其应用于新的元素

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

---

由于该类将出现在同级节点上，因此可以在添加之前将其从同级节点中删除：

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

---

在将

wedstrijdSelected

类添加到一个子类之前，您应该将其从所有子类中删除-以使其仅存在

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

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

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

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

});

---

Offtopic：与其构建无效属性，不如使用有效的HTML5。

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

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

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

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

});