JS如何推到数组，然后用2次点击空

JS How to push to array and then empty with 2 clicks

本文关键字：2次 然后 何推 数组 JS      更新时间：2023-09-26

我在JSFiddle (http://jsfiddle.net/4UvUv/198/)上创建了这个小示例，它允许您单击3个按钮，当您单击一个按钮时，它将一个值推送到一个名为'selected'的数组。假设我点击Cats按钮，它会把值Cats推到选定的数组。

但我不知道的是如何从数组中删除'猫'，如果'猫'按钮再次点击。有人知道如何使用我的例子做到这一点吗?或者是否有更好的方法?

如何推送到选定数组: 

var selected = []
$("#cats").click(function(e) {
  console.log("Cats");
  var value = 'cats';
  selected.push(value);
})

您可以尝试这样做:

$("#cats").click(function(e) {
    console.log("Cats");
    var value = 'cats';
    var index = selected.indexOf(value);
    if (index === -1) {
        selected.push(value);
    } else {
        selected.splice(index, 1);
    }
});

我认为它可以被优化

实现这一点的一个更简单的方法是仅在单击按钮元素时切换它们的类。然后，只有在单击#results按钮时才能生成数组。这样，您就不需要担心在添加/删除项时维护数组。试试这个:

$(".button").click(function(e) {
  $(this).toggleClass('selected');
});
$("#result").click(function(e) {
  var selected = $('.button.selected').map(function() {
    return this.id;
  }).get();
  console.log(selected);
})
.selected {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" id="cats">Cats</button>
<button class="button" id="dogs">Dogs</button>
<button class="button" id="rabbits">Rabbits</button>
<br />
<button id="result">Result</button>

$("#dogs").click(function(e) {
    var index = selected.indexOf("Dogs");
    if(index == -1){
    console.log("Dogs");
    var value = 'Dogs';
    selected.push(value);
  }else{
    selected.splice(index,1);
  }
})

试试这样:

var selected = [];
var i = 0;
$("#cats").click(function(e) {
if(i == 0){
   console.log("Cats");
   var value = 'cats';
   selected.push(value);
   i++} else {
   var check = selected.indexOf('cats');
   if(check !== -1){
       selected.splice(check, 1);
   }
   i--;
 }
});

检查此解决方案。您可以使用indexOf函数来知道项目是否已经存在于数组中。

var selected = []
$('.buttons').click(function(e) {
  var value = $(this).text();
  addOrRemove(value);
});
$("#result").click(function(e) {
  console.clear();
  console.log("results: ", selected);
});
function addOrRemove(item) {
  console.clear();
  console.log(item);
  var index = selected.indexOf(item);
  if (index === -1) {
    selected.push(item);
  } else {
    selected.splice(index, 1);
  }
}
button {
  font-size: 16px;
  padding: 10px;
  min-width: 100px;
  margin: 5px;
  background-color: #87CEEB;
  border: 1px solid #E6E6E6;
  color: white;
}
button:hover {
  background-color: #67BCDE;
}
button:focus {
  outline: none;
  background-color: #3AB2E2;
}
div button {
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button id="cats" class="buttons">Cats</button>
<button id="dogs" class="buttons">Dogs</button>
<button id="rabbits" class="buttons">Rabbits</button>
<div>
  <button id="result">Result</button>
</div>

相关文章：