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

Question

Objective

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

问题

我有一系列按钮 btn--like，当我取消选择一个按钮时它 countLike，它正在计算 class is-selected 按钮的数量。意外的行为是我单击了三个按钮，然后当我单击以前选择的按钮取消选择它时，countLike is 4, instead of 2

scripts.js

$(".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");
    }
});

index.html

<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>

Answer 1

无论按钮是否被选中，您都在增加 countLike。

试试这个：

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

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

或者，先进行切换，然后使用所需的选择器简单地计算元素的数量，而不是 increasing/decreasing 自己计算：

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

这将根据切换自动执行 +1 或 -1。

Answer 2

只需切换当前按钮 上的 class 首先 ，然后选择 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>

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

Counting items using .length on click producing incorrect value

javascript

jquery

onclick

string-length

Objective

问题

scripts.js

index.html