取決於元素禁用點擊功能取決於其他元素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>