Question

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

我正在为此切换一个布尔值，但是当布尔值为false时，不会从div中删除弹出的值，这可能是我做错了。可以编辑项目here

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

3小变化

声明each()函数之外的项目。如果不是，它会为每个听众重置

更改append()。{/ li>的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>

Answer 2

＆＃13;

var items = [];

$("#button-list button").on('click', function(e){
  var indexOfElement = items.indexOf(e.target.value);
  //value is not in the array
  if (indexOfElement < 0) {
    items.push(e.target.value);
  } else {
    //value is in the array, remove it
    items.splice(indexOfElement, 1);
  }
  
  $('#results').text(items);
});

＆＃13;

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

＆＃13;

为每个按钮单击推送和弹出值

2 个答案: