javascript - 每次单击按钮时推送和弹出值

Question

每次单击按钮时，值都应被插入数组并显示在 div 中。如果再次单击，它应该从数组中弹出并从 div 中删除。

我为此切换了一个 bool 值，但是当 bool 值为 false 时，弹出的值不会从 div 中删除，也许我做错了。项目可编辑here

$( "#button-list button" ).each(function(index) {
var items = [];
var toggle = false;
    $(this).on("click", function(){
    toggle = !toggle;
    if(toggle === true)
    items.push(this.value);
    else
    items.pop(this.value);
    
      $("#results").append(items);      
 });
});

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-list">
<button class="w3-button w3-black" value="(1,1)">(1,1)</button>
<button class="w3-button w3-black" value="(2,2)">(2,2)</button>
<button class="w3-button w3-black" value="(3,4)">(3,4)</button>
<button class="w3-button w3-black" value="(5,2)">(5,2)</button>
<button class="w3-button w3-black" value="(3,1)">(3,1)</button>
</div>
<p id="results"></p>

Answer 1

3 个小改动

1. 在 each() 函数之外声明项。如果没有，它会为每个监听器重置
2. 将 append() 函数更改为 text()。

追加将在每次单击时添加项目。您希望在每次点击时替换项目。

pop() 将从数组中删除最后一个元素。您需要使用splice()。 Splice 收到 2 个值。首先是要删除的索引，以及要删除的元素数量。

使用indexOf()我们可以获得数组上的元素索引。

items.splice(items.indexOf(this.value), 1);

希望这有帮助:)

var items = [];
$("#button-list button").each(function(index) {
  var toggle = false;
  $(this).on("click", function() {
    toggle = !toggle;
    if (toggle === true)
      items.push(this.value);
    else
      items.splice(items.indexOf(this.value), 1);

    //console.log(items);
    $("#results").text(items);
  });
});

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-list">
  <button class="w3-button w3-black" value="(1,1)">(1,1)</button>
  <button class="w3-button w3-black" value="(2,2)">(2,2)</button>
  <button class="w3-button w3-black" value="(3,4)">(3,4)</button>
  <button class="w3-button w3-black" value="(5,2)">(5,2)</button>
  <button class="w3-button w3-black" value="(3,1)">(3,1)</button>
</div>
<p id="results"></p>