取决于元素禁用点击功能取决于其他元素jQuery的

Question

例如NBA比赛。我希望用户在游戏中选择一个团队，一旦一个团队被点击并突出显示或给定一类边界，我希望相反的团队不可点击。

让我们说.. team-A vs Team-B ..我点击B队，B队突出显示。现在team-A不可点击。直到我再次点击Team-B切换删除边框/突出显示。如果我点击球队A，球队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规则来禁用该应禁用队的指针事件。 Here is a working Fiddle

$('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

您需要检查是否有任何的类，这是notthis。

$('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>