在点击时使用.length计算项目会产生不正确的值

Question

目的

• 应该可以选择一个按钮并单击该按钮 然后应该取消选择该按钮
• 当is-selected === 3类的按钮数量使用pointer-events: none时将光标行为更改为btn--like，除非首先取消选择按钮

问题

我有一系列按钮countLike，当我取消选择按钮is-selected时，它会计算班级countLike is 4, instead of 2的按钮数量。意外的行为是我点击了三个按钮，然后当我点击之前选择的按钮取消选择它时， $(".btn--like").on("click", function(){ let countLike = ($(".btn--like.is-selected").length) + 1; console.log(countLike); $(this).toggleClass("is-selected"); $(this).children(".fa-check").toggleClass("is-grey"); $(this).children(".fa-check").toggleClass("is-red"); if (countLike === 3) { $(".btn--like:not(.is-selected)").css("pointer-events", "none"); } else { $(".btn--like").css("pointer-events", "auto"); } });

scripts.js中

<div class="button__group">
                <button class="btn btn--option btn--like">Jewelry <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
                <button class="btn btn--option btn--like">Scarves <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
                <button class="btn btn--option btn--like">Fishing <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
                <button class="btn btn--option btn--like">Cologne <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
                <button class="btn btn--option btn--like">Shirts <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
                <button class="btn btn--option btn--like">Sports apparel <i class="fa fa-check is-grey" aria-hidden="true"></i></button>
    </div>

的index.html

page.php

Answer 1

只需在当前按钮第一个上切换课程，然后选择length（参见评论）：

$(".btn--like").on("click", function() {
  // FIRST toggle the classs
  $(this).toggleClass("is-selected");

  // THEN take the count
  let countLike = $(".btn--like.is-selected").length;
  console.log(countLike);

  $(this).children(".fa-check").toggleClass("is-grey");
  $(this).children(".fa-check").toggleClass("is-red");

  if (countLike === 3) {
    $(".btn--like:not(.is-selected)").css("pointer-events", "none");
  } else {
    $(".btn--like").css("pointer-events", "auto");
  }
});

.is-selected {
  color: blue;
}

<div class="button__group">
  <button class="btn btn--option btn--like">Jewelry <i class="fa fa-check is-grey" aria-hidden="true"></i>
  </button>
  <button class="btn btn--option btn--like">Scarves <i class="fa fa-check is-grey" aria-hidden="true"></i>
  </button>
  <button class="btn btn--option btn--like">Fishing <i class="fa fa-check is-grey" aria-hidden="true"></i>
  </button>
  <button class="btn btn--option btn--like">Cologne <i class="fa fa-check is-grey" aria-hidden="true"></i>
  </button>
  <button class="btn btn--option btn--like">Shirts <i class="fa fa-check is-grey" aria-hidden="true"></i>
  </button>
  <button class="btn btn--option btn--like">Sports apparel <i class="fa fa-check is-grey" aria-hidden="true"></i>
  </button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

FWIW，我可能实际上也改变了按钮的disabled状态，而不仅仅是禁用它们上的指针事件：

$(".btn--like").on("click", function() {
  // FIRST toggle the class
  $(this).toggleClass("is-selected");

  // THEN take the count
  let countLike = $(".btn--like.is-selected").length;
  console.log(countLike);

  $(this).children(".fa-check").toggleClass("is-grey");
  $(this).children(".fa-check").toggleClass("is-red");

  // Update the disabled property rather than using pointer-events
  if (countLike === 3) {
    $(".btn--like:not(.is-selected)").prop("disabled", true);
  } else {
    $(".btn--like").prop("disabled", false);
  }
});

.is-selected {
  color: blue;
}

<div class="button__group">
  <button class="btn btn--option btn--like">Jewelry <i class="fa fa-check is-grey" aria-hidden="true"></i>
  </button>
  <button class="btn btn--option btn--like">Scarves <i class="fa fa-check is-grey" aria-hidden="true"></i>
  </button>
  <button class="btn btn--option btn--like">Fishing <i class="fa fa-check is-grey" aria-hidden="true"></i>
  </button>
  <button class="btn btn--option btn--like">Cologne <i class="fa fa-check is-grey" aria-hidden="true"></i>
  </button>
  <button class="btn btn--option btn--like">Shirts <i class="fa fa-check is-grey" aria-hidden="true"></i>
  </button>
  <button class="btn btn--option btn--like">Sports apparel <i class="fa fa-check is-grey" aria-hidden="true"></i>
  </button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

无论是选择还是取消选择按钮，都会增加countLike。

试试这个：

let countLike = ($(".btn--like.is-selected").length);

if ($(this).hasClass("is-selected")) {
    countLike += 1;
} else {
    countLike -= 1;
}

或者，首先进行切换，然后使用所需选择器简单计算元素数量，而不是自己增加/减少计数：

$(this).toggleClass("is-selected");
let countLike = ($(".btn--like.is-selected").length);

这将自动执行+1或-1，具体取决于切换。