Question

我在页面中有多个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>

当我点击带有'wedstrijd'类的div时，我会切换到另一个类

$("#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'一次。

Answer 1

像...一样的东西。

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

这将确保所有其他元素都关闭。这将阻止它取消选择你想要它的项目，即使是一纳秒。

Answer 2

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

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

Answer 3

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

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

Answer 4

你应该在将所有孩子添加到一个孩子之前添加wedstrijdSelected班级，以保持它只存在

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

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

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

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

});

根据自定义属性将css切换为div

4 个答案: