再次单击时如何取消选择一个词？

Question

如何在使单词可点击后取消选择该单词

我想做的是添加（我假设）另一个 JS，这样当他们再次点击这个词时，它会恢复正常而没有黑色背景？

Answer 1

无需为您的代码设置内联值，只需创建一个 CSS class 来处理此问题，然后根据需要进行切换。

    element.onclick = () =>   {
      element.classList.toggle('highlighted');
    }

还有 class ...

.highlighted {
  background-color: black;
  color: white;
}

一个更复杂的解决方案是向您的 onclick 函数添加一个 if/else 语句。

    element.onclick = () =>   {
      if (element.style.background == '#000') {
          element.style.background = '#fff';
      }
      else { 
          element.style.background = '#000';
      }
    }

.split() 函数实际上会删除您的空格，因此请确保在将所有内容追加在一起时也修复该问题。

inputValue.split(" ").forEach(word => { 
    const element = document.createElement("span");
    element.innerHTML = word + ' ';  
    ...

我在 codepen.io 模拟了 class 解决方案。

再次单击时如何取消选择一个词？

how do you deselect a word when clicking on it again?

html

javascript

onclick