Question

我有一个元素列表，当我单击该元素时，我想将textNode添加到Array中，只需单击一下元素。我不需要数组中的重复值。然后，当我在数组中有5个元素时，我想停止按下

我尝试的方法无效！

  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
  </div>

    let numArr = [];
    let elements = [...document.querySelectorAll('span')];

    elements.forEach((item) => {
      item.addEventListener('click', (e) => {
         item.classList.add('green');
         numArr.push(item.textContent);
         if(numsArr.length === 5) {
            item.setAttribute('disabled', true);
         } else {
            item.setAttribute('disabled', true);
         }
    })
    });

我希望输出[2, 5, 7, 10, 3]所按下项目的任何值，而数组中没有重复项！

Answer 1

只需检查元素文本是否已经在array中，然后再添加新项目在下面的代码中，我使用了indexOf：

    elements.forEach((item) => {
          item.addEventListener('click', (e) => {
             item.classList.add('green');
             let text = item.textContent;
             if(numArr.indexOf(text) == -1){
                numArr.push(item.textContent);
             }
             if(numArr.length === 5) {
                item.setAttribute('disabled', true);
             } else {
                item.setAttribute('disabled', true);
             }
        })

如何只单击一次html元素？

1 个答案: