逻辑非运算符 (!) 将 class 添加到错误按钮的问题

Question

我有一个按钮列表。单击其中一个时，我希望为所有其他按钮提供 not-selected 的 class，这会将它们的文本颜色更改为灰色并生成指针事件：none

我正在使用点击处理程序，不确定我使用感叹号 ! 是否正确，因为它不断将 class 添加到我刚刚点击的按钮而不是所有按钮没有被点击。

$(".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 对象使用 ! 运算符无效。为实现您的要求，您可以 select 所有 .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>

逻辑非运算符 (!) 将 class 添加到错误按钮的问题

Issues with logical not operator (!) adding class to wrong button

javascript

css

jquery

button

negation