时间戳

首页 > 解决方案 > 单击按钮时从数组中删除相关的 DOMTokenList 项

javascript - 单击按钮时从数组中删除相关的 DOMTokenList 项

问题描述

我试图弄清楚如何在单击按钮时从数组中删除一个项目。我已经想出了如何将项目推送到数组中，但事实证明移除它更加困难。JS代码如下：

let sideArray = [];
let sideButtons = document.querySelectorAll('div.side-buttons button');

for (let i = 0; i < sideButtons.length; i++) {
  if(sideButtons[i].textContent !== "RANDOM" ) {
    sideButtons[i].onclick = function (e) {
      //alert (this.innerHTML)

    this.classList.toggle('on');
    let tokenNum = this.className[0] + this.className[1];
    let index = sideArray.indexOf(tokenNum);
    if (this.classList.contains('on')) {

      sideArray.push(+(tokenNum));
      
      sortNumbers(sideArray);
      console.log(tokenNum);
      console.log(index);
      console.log(sideArray);

    } else if (!this.classList.contains('on')) {


      sideArray.splice(index, 1)
      sortNumbers(sideArray);
      console.log(sideArray);
    }
      let buttonHTML = this.textContent;

      //link to create choice button function
      //choiceButtons(buttonHTML)
    }
  }
}


function sortNumbers(array) {
  array.sort(function(a, b) {
    return a - b;
  });
}

每个按钮都有一个数字作为一个类，可以帮助我遍历它们。在单击时将相关数字推送到数组后，我想在第二次单击按钮时从数组中删除相关数字。你能帮我吗？

编辑：就目前而言，splice 方法会删除数组中的最后一个元素，无论您单击哪个按钮。

这是我的完整代码：https ://codepen.io/david-webb/pen/JjXRqBQ

标签： javascriptdomtokenlist

解决方案

主要问题是您收集令牌的方式。

您正在尝试收集按钮类的第一个和第二个字符，但通常只有第一个字符 - 没有第二个 - 所以这会产生一个类似4undefined. 我们可以通过 REGEX 检索令牌来解决此问题，允许任意数量的字符（1、2、6891 等）。

我已经解决了这个问题，还重构了你的代码。这将替换您的for循环。我已经委派了这些活动，还删除了一些不必要的重复。

document.body.addEventListener('click', evt => {
    if (!evt.target.matches('div.side-buttons button') || evt.target.textContent == 'RANDOM') return;
    evt.target.classList.toggle('on');
    let tokenNum = evt.target.className.match(/\d+/); //<-- better way of getting token
    if (evt.target.classList.contains('on'))
        sideArray.push(tokenNum[0]);
    else {
        let index = sideArray.indexOf(tokenNum[0]); //<-- need this only in the else block, not if
        sideArray.splice(index, 1)
    }
    sortNumbers(sideArray);
    let buttonHTML = evt.target.textContent; //<-- you don't currently do anything with this
});

推荐阅读