在点击事件

Question

我目前正在制作一款小应用来练习JavaScript和jQuery。 我有各种各样的水果。

var fruits = [apples, bananas, grapes, watermelons, tomatoes];

在点击活动中，我想删除tomatoes，但如果我改变主意点击同一按钮，它会将tomatoes添加回数组fruits。我一直在使用splice删除，但我不知道如何使用splice元素添加回数组。

编辑以澄清：

元素不一定是tomatoes，但它可以是fruits数组中的任何随机元素。我正在使用

fruits.splice(i,1);

Answer 1

如果数组位置无关紧要：

a.append((random.random(), random.random()))

如果要将其插入数组中的特定位置（索引）：

fruits.push(tomatoes);

会将fruits.splice(index, 0, tomatoes); 插入指定tomatoes的{​​{1}}（首先删除fruits个项目，因此它只是一个插页。）

  

Array.prototype.splice（）

     

index方法通过删除现有元素和/或添加新元素来更改数组的内容。

     

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

临时存储已删除的元素并重新添加

0将包含已删除元素的数组，因为这是splice()的返回值。所以

var deletedFruits = fruits.splice(i,1);

将重新添加已删除的水果。

在原始位置重新添加已删除的元素

存储已删除元素的位置：

splice()

如果需要，您可以使用前面提到的

将已删除的水果恢复到原始阵列位置

fruits = fruits.concat(deletedFruits);

Answer 2

要在拼接后将值插回到数组中（在同一位置），通常可以这样做：

// delete:
var deleted = fruits.splice(i, 1);
// restore:
fruits.splice(i, 0, deleted);

请注意， delete 是一个包含一个元素的数组。

它也可以通过对原始数组进行一种备份来完成：

// backup
var backup = fruits.slice(); // copy
// delete:
fruits.splice(i, 1);
// restore:
fruits = backup;

撤消堆栈

要支持多个撤消操作，您可以使用撤消堆栈，它只会跟踪阵列的所有版本。当用户执行撤消操作时，将从该堆栈弹出以前的版本。这样您就可以撤消多个删除：

＆＃13;

＆＃13;

var fruits = ['Apples', 'Bananas', 'Grapes', 'Watermelons', 'Tomatoes'];
var undoStack = [];

function showFruits() {
    $('#fruits').html('').append(
        // translate the array to a list of LI elements with delete buttons 
        fruits.map(function(fruit) {
            return $('<li>').text(fruit).append(
                $('<button>').addClass('delete').text('Delete'));
        })
    );
}

$(document).on('click', 'button.delete', function () {
    undoStack.push(fruits.slice()); // save a copy of the current array on the stack
    fruits.splice($(this).parent().index(), 1); // remove from array at index
    showFruits(); // update display
});

$('#undo').click(function () {
    if (!undoStack.length) return; // cannot undo 
    fruits = undoStack.pop(); // get previous state
    showFruits(); // update display
});

showFruits(); // show initial list

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="fruits"></ul>
<button id="undo">Undo</button>

＆＃13;

＆＃13;

＆＃13;

更节省内存的替代方案

如果您对每次删除元素时存储整个数组的内存使用感到困扰，可以使用以下替代函数，这些函数仅在每次删除操作时存储索引和已删除的值：

$(document).on('click', 'button.delete', function () {
    var i = $(this).parent().index(); // get index where to delete
    var deleted = fruits.splice(i, 1); // remove from array at that index
    undoStack.push([i, deleted]); // save the index and value on the stack
    showFruits(); // update display
});

$('#undo').click(function () {
    if (!undoStack.length) return; // cannot undo 
    var restore = undoStack.pop(); // get information for re-inserting
    fruits.splice(restore[0], 0, restore[1]); // insert the value 
    showFruits(); // update display
});

如果您还将撤销原则用于其他修改，例如撤消插入或修改标签，那么第一个解决方案不需要太多修改，而更节省内存的修改需要更多。

Answer 3

您可以使用以下两个功能添加和删除水果：

function addFruit(fruit) {
  fruits.push(fruit);
}

function removeFruit(fruit) {
  // indexOf method returns index of fruit in the list, or -1 if fruit is not found.
  var index = fruits.indexOf(fruit);
  if (index > -1) {
    fruits.splice(index, 1);
  }
}

这假设您已经定义了一个名为fruits的数组。然后你可以做类似

的事情

<script>
  function updateOutput() {
    document.getElementById('output').innerHTML = fruits.join(', ');
  }

  function addSelectedFruit() {
    var selectedFruit = document.getElementById('fruit-select').value;
    addFruit(selectedFruit);
    updateOutput();
  }

  function removeSelectedFruit() {
    var selectedFruit = document.getElementById('fruit-select').value;
    removeFruit(selectedFruit);
    updateOutput();
  }
</script>
<input type="text" id="fruit-select"/>
<button onclick="addSelectedFruit();">Add</button>
<button onclick="removeSelectedFruit();">Remove</button>
List of fruits:
<p id="output"></p>

示例：

<script>
  var fruits = ['Apples', 'Pears', 'Pineapples'];
function addFruit(fruit) {
  fruits.push(fruit);
}
function removeFruit(fruit) {
  var i = fruits.indexOf(fruit);
  if (i > -1) {fruits.splice(i, 1);}else{alert(fruit + ' cannot be removed, as it is not present in the array of fruits.');}
}
function selectedFruit() {
  return document.getElementById('fruit-select').value;
}
function updateOutput() {
  document.getElementById('output').innerHTML = fruits.join(', ');
}
  </script>
Fruit:
<input type="text" id="fruit-select" value="Orange"/>
<button onclick="addFruit(selectedFruit());updateOutput();">Add</button>
<button onclick="removeFruit(selectedFruit());updateOutput();">Remove</button>
<p id="output">Apples, Pears, Pineapples</p>