JS如何推入數組，然後點擊兩次以清空

-1

我已經在JSFiddle（http://jsfiddle.net/4UvUv/198/）上創建了這個小例子，它允許您單擊3按鈕，並且當您單擊按鈕時，它會將值推入一個名爲'選擇」。因此，讓我們說我點擊'貓'按鈕，它會將值'貓'推到選定的數組。JS如何推入數組，然後點擊兩次以清空

但我不知道是如何從數組如果「貓」按鈕被再次點擊刪除「貓」。會有人知道如何使用我的例子做到這一點？或者如果有更好的方法？

如何推到所選陣列：

var selected = [] 

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

來源

2016-11-01 Garrett

檢查下面的鏈接。我希望它可以幫助 http://stackoverflow.com/questions/5767325/how-to-remove-a-particular-element-from-an-array-in-javascript – reza

你可以嘗試這樣的事情：

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

可以優化我覺得

來源

2016-11-01 14:01:13

一個更簡單的方法實現這一點的目的只是在點擊按鈕元素時切換類。然後，您只能在單擊#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>

來源

2016-11-01 14:02:29

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

來源

2016-11-01 14:03:14 xszaboj

嘗試這樣的事：

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

來源

2016-11-01 14:03:41

檢查這個解決方案。你可以使用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>

來源

2016-11-01 14:05:56

JS如何推入數組，然後點擊兩次以清空

回答

相關問題