javascript - 如何使用JavaScript更改文字onclick？

有多个行，例如

名称状态

a是（超链接）
b否（超链接）
c是（超链接）

我的代码是：

function change_text() {
  var button = document.getElementById('toggle_button');
  if (button.innerHTML === "YES") {
      button.innerHTML = "NO";
  }
  else {
      button.innerHTML = "YES";
  }
}

<a href='javascript: toggle()'><p id="toggle_button" onclick="change_text()">YES</p></a>
 <a href='javascript: toggle()'><p id="toggle_button" onclick="change_text()">NO</p></a>
<a href='javascript: toggle()'><p id="toggle_button" onclick="change_text()">YES</p></a>

onclick在第一行发生的情况仅能提供一些解决方案。我是javascript或stackoverflow的新手。如有任何问题，请发表评论。

最佳答案

这可能是我的做法

jsbin.com demo

// define Toggler "class"
var Toggle = function(elem) {

  elem.addEventListener("click", onClick);

  function onClick(event) {
    toggleText();
    event.preventDefault();
  }

  function toggleText() {
    var text = elem.innerHTML;
    elem.innerHTML = (text === "YES") ? "NO" : "YES";
  }

  this.toggle = toggleText;
};

// initialize
var toggles = document.getElementsByClassName("toggle");

for (var i=0, len=toggles.length; i<len; i++) {
  new Toggle(toggles[i]);
}

这将毫不干扰地附加到类toggle的HTML元素上

<a href="#toggle" class="toggle">YES</a>
<a href="#toggle" class="toggle">NO</a>
<a href="#toggle" class="toggle">YES</a>

为了更加方便，此Toggle“类”为您提供了API，以编程方式与切换器进行交互

<a href="#toggle" id="foo">YES</a>

// API example
var elem = document.getElementById("foo");
var fooToggle = new Toggler(elem);

// toggle off
fooToggle.toggle();
// <a href="#toggle" id="foo">NO</a>

// toggle on again
fooToggle.toggle();
// <a href="#toggle" id="foo">YES</a>

现在，由于这不会更改inputs或其他任何内容，因此您可能想在data-value="YES"元素上使用data-value="NO"或a。然后，当您提交页面时，可以收集此数据，将其转换为JSON，然后提交进行处理。

关于javascript - 如何使用JavaScript更改文字onclick？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20297297/