javascript - 在按钮 onclick 中切换文本

Question

我试图在每次单击按钮时在“阅读”和“未阅读”之间切换按钮中的文本。这些按钮是用 js 动态创建的，并放置在 HTML 表格中。每个按钮都有一个唯一的 ID，但类名相同。

我已经编写了一个适用于表中设置的第一个按钮的 if 语句，但同样的 if 语句不适用于动态创建的按钮。

我已经为 if 语句尝试了很多不同的变体。我不确定最好的方法是否是访问唯一 ID，但我不知道该怎么做。任何帮助表示赞赏!谢谢

这是一个回复 https://repl.it/repls/SpryVisibleMining

function toggleText(){
     if (readButton.innerHTML == "READ"){
        readButton.innerHTML = "NOT READ";
        } else if (readButton.innerHTML == "NOT READ"){
        readButton.innerHTML = "READ";
        } else {
        null
        }
        }

这是一个不会做任何事情的 if 语句

function toggleOthers() {
    let toggle = document.getElementsByClassName(".readBtn")

    toggle[0].addEventListener("click", () => {

        if (toggle.innerHTML == "READ") {
            toggle.innerHTML = "NOT READ"
        } else if (toggle.innerHTML == "NOT READ") {
            toggle.innerHTML = "READ"
        } else {
            null
        }
    })
}

toggleOthers()

Answer 1

问题在于您如何收听 click事件。你的toggleText每当您单击 #readed 时都会触发函数带有 onclick 的按钮属性。但是里面toggleText您向同一个按钮添加另一个 事件监听器的函数，每次单击该按钮时都会添加一个新的事件监听器。

因此，每次单击按钮时，都会增加调用 toggleText 的次数。 .

删除 onclick从按钮并更改 id到 class属性。你说你会有多个按钮，所以有多个具有相同 id 的按钮不会这样做。

<button class="readed">READ</button>

因为您想收听 click动态创建的元素上的事件我建议您使用事件委托(delegate)。这意味着监听 click父元素上的事件，这可能是你的 table#shelf元素，并检查单击了哪个元素。如果点击了A，则执行X，如果点击了B，则执行Y。

监听表格元素上的点击事件。

var table = document.getElementById('shelf');
table.addEventListener("click", tableClickHandler);

在tableClickHandler检查哪个元素被点击了。您可以通过获取点击的目标 并使用 closest 来实现方法来查看它是否真的是您想要被点击的元素。

例如当你有一个 <span>在你的<button> , event.target将是 <span> .但是你想要 <button>元素。 closest在 DOM 树中上升，看看它是否最终到达一个元素，即 <button>。你想要并返回它。

您可以对表格内的任何按钮执行此操作。

function tableClickHandler(event) {
  var readed = event.target.closest('.readed');
  if (readed) {
    toggleText(readed);
  }
}

修改你的toggleText函数，以便它可以接受任何 <button>你扔添加它，你想要文本切换。添加 button代表当前按钮的参数。

// Toggle text when clicked.
function toggleText(button) {
  if (button.innerHTML == "READ") {
      button.innerHTML = "NOT READ";
  } else if (button.innerHTML == "NOT READ") {
      button.innerHTML = "READ";
  } else {
      null
  }
}