根据其他元素jquery禁用对元素的单击函数

Question

example..an NBA比赛。我希望用户在游戏中选择一个团队，一旦一个团队被点击并突出显示或给出一个类别的边框，我希望对方的团队是不可点击的。

让我们说..。A队对B队..。我点击team，team是高亮显示的。现在A队不能点击..。直到我再次单击Team来切换删除边框/高亮显示。如果我单击team-A，team-B将不能单击

我该怎么做呢？

https://jsfiddle.net/mfvevgs5/5/

<div class="game game-1">
Game-1
  <div class="team road">
    <h3>
    Team-A
    </h3>
  </div>
  vs
  <div class="team home">
    <h3>
    Team-B
    </h3>
  </div>
</div>

<div class="game game-2">
Game-2
  <div class="team road">
    <h3>
    Team-C
    </h3>
  </div>
  vs
  <div class="team home">
   <h3>
    Team-D
    </h3>
  </div>
</div>

.border{
  border: 2px solid blue;
  width: 90px;
}

$('h3').on('click', function(){
    $(this).toggleClass('border');
});

Answer 1

可以添加CSS规则以禁用应禁用的团队中的指针事件。这是一个工作场所

​

$('h3').on('click', function(){
  $(this).closest('.game').find('h3').toggleClass('disable-team');
  $(this).toggleClass('disable-team').toggleClass('border');
});

.border{
  border: 2px solid blue;
  width: 90px;
}

.disable-team{
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game game-1">
Game-1
  <div class="team road">
    <h3>
    Team-A
    </h3>
  </div>
  <div class="team home">
    <h3>
    Team-B
    </h3>
  </div>
</div>

<div class="game game-2">
Game-2
  <div class="team road">
    <h3>
    Team-C
    </h3>
  </div>
  <div class="team home">
   <h3>
    Team-D
    </h3>
  </div>
</div>

​

Answer 2

您需要检查是否有一个类是not this。

​

$('h3').on('click', function() {
  var selectedTeams = $(this).closest('.game').find('.team h3.border');
  if (selectedTeams.not(this).length == 0)
    $(this).toggleClass('border');
});

.border {
  border: 2px solid blue;
  width: 90px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game game-1">
  Game-1
  <div class="team road">
    <h3>
    Team-A
    </h3>
  </div>
  <div class="team home">
    <h3>
    Team-B
    </h3>
  </div>
</div>

<div class="game game-2">
  Game-2
  <div class="team road">
    <h3>
    Team-C
    </h3>
  </div>
  <div class="team home">
    <h3>
    Team-D
    </h3>
  </div>
</div>

​