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

Question

我正在尝试弄清楚如何通过单击按钮从数组中删除一项。我已经知道如何将项推送到数组中，但是删除它会更加困难。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;
  });
}

每个按钮都有一个数字作为类，帮助我遍历它们。一旦我在单击时将相关数字推入数组，我希望在第二次单击按钮时从数组中删除相关数字。你能帮上忙吗？

Edit:无论您单击哪个按钮，splice方法都会删除数组中的最后一个元素。

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

Answer 1

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

您试图收集按钮类的第一个和第二个字符，但通常只有第一个字符，没有第二个字符，所以这会生成一个类似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
});

Answer 2

我通过使用this.className.split(‘')解决了在DOMTokenList中连接元素的问题。除了这一点之外，它与我的原始代码相同：

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

    this.classList.toggle('on');
    let classArray = this.className.split(' ')
    let buttonNum = +(classArray[0]);
    let index = sideArray.indexOf(buttonNum);
    if (this.classList.contains('on')) {
      sideArray.push(buttonNum);
      sortNumbers(sideArray);
      console.log(sideArray);
      orderButtons(sideArray, textContent);//*FOR SPLICING intervalArray

    } else {
      sideArray.splice(index, 1);
      orderButtons(sideArray);
      console.log(sideArray);
    }
  }
 }
}