他の要素に応じて要素のクリック機能を無効にするjquery

Question

例.. NBAゲーム。私は、ユーザーがゲーム内のチームを選択し、チームがクリックされ、強調表示されたり、ボーダークラスが与えられたら、反対のチームをクリックできないようにしたい。

私はチームBとチームBをクリックします。チームBをクリックします。チームBが強調表示されます。今チームAはクリック可能ではありません。チーム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>