논리 연산자가 아닌 문제 (!) 잘못된 버튼에 클래스 추가

Question

버튼 목록이 있습니다. 그 중 하나를 클릭하면 다른 모든 단추에 텍스트를 회색으로 변경하고 포인터 이벤트를 만드는 not-selected 클래스를 제공하려고합니다. 없음

클릭 처리기를 사용하고 있습니다. 느낌표 사용 내역이 올바른지 확인하십시오. 클릭하지 않은 모든 버튼에 대해 클릭 한 버튼에 해당 클래스를 계속 추가하기 때문에 올바른지 확인하십시오.

$(".btn--list").on("click", function(){ 
    !($(this).addClass("not-selected")); 
)}; 

<ul> 
    <li><h2>Filters</h2></li> 
    <li class="filter--all"><button class="btn--list btn--all is-selected">Select All</button></li> 

    <li><h2>Decade</h2></li> 
    <li><button class="btn--list btn--1960">1960s</button></li> 
    <li><button class="btn--list btn--1970">1970s</button></li> 
    <li><button class="btn--list btn--1980">1980s</button></li> 
    <li><button class="btn--list btn--1990">1990s</button></li> 
    <li><button class="btn--list btn--2000">2000s</button></li> 
    <li><button class="btn--list btn--2010">2010s</button></li> 

    <li><h2>Position</h2></li> 
    <li><button class="btn--list btn--goalie">Goalie</button></li> 
    <li><button class="btn--list btn--defencemen">Defenceman</button></li> 
    <li><button class="btn--list btn--forward">Forward</button></li> 

    <li><h2>Other</h2></li> 
    <li><button class="btn--list btn--name">First Name</button></li> 
    <li><button class="btn--list btn--hometown">Hometown</button></li> 
    <li><button class="btn--list btn--gamesp">Games Played</button></li> 
    <li class="not--goalie not--goals"><button class="btn--list btn--goals">Goals</button></li> 
    <li class="not--goalie not-assists"><button class="btn--list btn--assists">Assists</button></li> 
    <li class="not--goalie not-points"><button class="btn--list btn--points">Points</button></li> 
    <li class="not--goalie not-penalty"><button class="btn--list btn--penalty">Penalty Minutes</button></li> 
    <li><button class="btn--list btn--goalsagainst">Goals Against <span class="is-highlighted">*</span></button></li> 
    <li><button class="btn--list btn--savepercent">Save Percentage <span class="is-highlighted">*</span></button></li> 
    <li><button class="btn--list btn--shutouts">Shutouts <span class="is-highlighted">*</span></button></li> 
</ul> 

Answer 1

JQuery와 개체에 ! 연산자의 사용이 잘못되었습니다. 원하는 것을 얻으려면 .btn--list 요소를 모두 선택하고 .not(this)을 사용하여 현재 요소를 제외 할 수 있습니다. 이 시도 :

$(".btn--list").on("click", function() { 
 
    $(".btn--list").not(this).addClass("not-selected"); 
 
});

/* For demo purposes... */ 
 
.not-selected { 
 
    background-color: #c00; 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <h2>Filters</h2> 
 
    </li> 
 
    <li class="filter--all"> 
 
    <button class="btn--list btn--all is-selected">Select All</button> 
 
    </li> 
 

 
    <li> 
 
    <h2>Decade</h2> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--1960">1960s</button> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--1970">1970s</button> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--1980">1980s</button> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--1990">1990s</button> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--2000">2000s</button> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--2010">2010s</button> 
 
    </li> 
 

 
    <li> 
 
    <h2>Position</h2> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--goalie">Goalie</button> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--defencemen">Defenceman</button> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--forward">Forward</button> 
 
    </li> 
 

 
    <li> 
 
    <h2>Other</h2> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--name">First Name</button> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--hometown">Hometown</button> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--gamesp">Games Played</button> 
 
    </li> 
 
    <li class="not--goalie not--goals"> 
 
    <button class="btn--list btn--goals">Goals</button> 
 
    </li> 
 
    <li class="not--goalie not-assists"> 
 
    <button class="btn--list btn--assists">Assists</button> 
 
    </li> 
 
    <li class="not--goalie not-points"> 
 
    <button class="btn--list btn--points">Points</button> 
 
    </li> 
 
    <li class="not--goalie not-penalty"> 
 
    <button class="btn--list btn--penalty">Penalty Minutes</button> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--goalsagainst">Goals Against <span class="is-highlighted">*</span> 
 
    </button> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--savepercent">Save Percentage <span class="is-highlighted">*</span> 
 
    </button> 
 
    </li> 
 
    <li> 
 
    <button class="btn--list btn--shutouts">Shutouts <span class="is-highlighted">*</span> 
 
    </button> 
 
    </li> 
 
</ul>