Question

我有一个随机元素的无序列表：

<ul id="uList">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    </ul>

<p>You have selected: </p><p id="result"></p>

我在无序列表的所有元素上添加了一个事件监听器。

var elems = document.getElementsByTagName('li');
var selected;
var arr1 = [];

Array.from(elems).forEach(v => v.addEventListener("click", onClickItems,false));

我创建了一个在单击无序列表元素时切换的函数，因此我可以在元素中添加元素或从元素中删除元素。

function onClickItems() {
    this.classList.toggle('selected');
    if (this.classList.contains('selected')){
    selected = this.innerHTML;
    arr1.push(selected);
    document.getElementById("result").innerHTML = arr1.join("<br>");
 } else {
    lookValueArray(returenIndex());
    document.getElementById("result").innerHTML = arr1.join("<br>");
    }
 }

添加部分工作正常但是当用户从无序列表中选择相同的元素以将其删除时，它将无法正常工作。它只删除已添加到数组中的最后一个元素。

所以，我创建了这两个函数：第一个，用于存储所选元素进入数组时的索引。

function returenIndex () {
    var indexx = arr1.indexOf(selected);
    return(indexx);
}

第二个，从无序列表中查找所选索引的值，如果它等于所选索引，则将其删除。

function lookValueArray (inde1) {
    if (arr1[inde1].value = selected) {
        arr1.splice(inde1, 1);
    } 
}

仍然是相同的输出。它添加完美但它不会删除它。此外，它只会删除最后一个元素输入到数组中，即使我选择了第二个要删除的元素。

BTW，我尝试使用arr1.splice(0, 0, selected)而不是arr1.push(selected)，所以我可以让元素在特定位置进入数组但是也不会有效。

Answer 1

在您的代码中，当您第一次单击其中一个元素时，selected变量未定义。当您第一次单击其中一个元素时，需要向selected添加一个值，这样您只需将selected = this.innerHTML;移到if语句之外。你也不需要在lookValueArray()函数中使用if语句，因为你正在进行asignment而不是使用（==或===进行验证）。请参阅下面的工作代码：

var elems = document.getElementsByTagName('li');
var selected;
var arr1 = [];
Array.from(elems).forEach(v => v.addEventListener("click", onClickItems, false));

function onClickItems() {
  selected = this.innerHTML;
  this.classList.toggle('selected');
  if (this.classList.contains('selected')) {
    //selected = this.innerHTML; //commented this line and added it above, outside the if statement
    arr1.push(selected);
    document.getElementById("result").innerHTML = arr1.join("<br>");
  } else {
    lookValueArray(returenIndex());
    document.getElementById("result").innerHTML = arr1.join("<br>");

  }
}

function lookValueArray(inde1) {
    arr1.splice(inde1, 1);
}

function returenIndex() {
  var indexx = arr1.indexOf(selected);
  return (indexx);
}

.selected {
  color: #f00;
}

<ul id="uList">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<p>You have selected: </p>
<p id="result"></p>

从无序列表或有序列表中添加和删除数组的元素

1 个答案: