Question

我已经在JSFiddle（http://jsfiddle.net/4UvUv/198/）上创建了这个小例子，它允许你点击3按钮，当你点击一个按钮时，它会将一个值推送到名为＆＃39; selected＆＃39的数组;。所以我要点击“Cats＆＃39;按钮，它会推动猫的价值。到选定的数组。

但我不知道的是如何删除“Cats＆＃39;从数组中得到的＆＃39; Cats＆＃39;按钮再次被点击。有人会用我的例子知道如何做到这一点吗？或者如果有更好的方法吗？

我如何推送到所选数组：

var selected = []

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

Answer 1

您可以尝试这样的事情：

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

我认为可以优化

Answer 2

实现此目的的一种更简单的方法是仅在单击按钮元素时切换按钮元素上的类。然后，只有在单击#results按钮时才能生成阵列。这样，您无需担心在添加/删除项目时维护阵列。试试这个：

＆＃13;

$(".button").click(function(e) {
  $(this).toggleClass('selected');
});

$("#result").click(function(e) {
  var selected = $('.button.selected').map(function() {
    return this.id;
  }).get();
  console.log(selected);
})

＆＃13;

.selected {
  color: red;
}

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

尝试这样的事情：

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--;
 }
});

Answer 5

检查此解决方案。您可以使用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>

JS如何推送到数组，然后通过2次单击清空

5 个答案: