Question

有多行，例如

姓名状态

是（超链接）
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的新手。如有任何问题，请发表评论。

Answer 1

这可能是我做的方式

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，然后提交以进行处理。

Answer 2

id总是uniq.you不能使用多个时间相同的id。请区分id并尝试。

<script>
function change_text(obj) {

   if (obj.innerHTML === "YES") {
       obj.innerHTML = "NO";
   }
   else {
      obj.innerHTML = "YES";
   }
  }
</script>

 <a href='javascript: void(0);' onclick="change_text(this)">YES</a>
 <a href='javascript: void(0);' onclick="change_text(this)">NO</a> 
 <a href='javascript: void(0);' onclick="change_text(this)">YES</a>

Answer 3

页面上的元素不能具有相同的ID。所有这三个元素都有相同的ID id="toggle_button"

试试这个

<强> HTML

<a href='javascript: void(0);' onclick="change_text(this)">YES</a>
 <a href='javascript: void(0);' onclick="change_text(this)">NO</a> 
 <a href='javascript: void(0);' onclick="change_text(this)">YES</a>

以下是Javascript

function change_text(btn) {
        if (btn.innerHTML === "YES") {
            btn.innerHTML = "NO";
        }
        else {
            btn.innerHTML = "YES";
        }
    }

工作FIDDLE LINK。

Answer 4

请检查以下答案

function changeText(idElement) {
var element = document.getElementById('element' + idElement);
if (idElement === 1 || idElement === 2) {
    if (element.innerHTML === 'Read More...') element.innerHTML = 'Close';
    else {
        element.innerHTML = 'Read More...';
    }
}
}

和现场演示是http://jsfiddle.net/UfVAH/

Answer 5

使用this关键字在javascript中获取当前元素对象。

试试这个：

<强> HTML：

<a href='javascript:void(0)'><p class="toggle_button" onclick="change_text(this)">YES</p></a>
<a href='javascript:void(0)'><p class="toggle_button" onclick="change_text(this)">NO</p></a> 
<a href='javascript:void(0)'><p class="toggle_button" onclick="change_text(this)">YES</p></a>

<强>使用Javascript：

function change_text(Object) {
        if (Object.innerHTML === "YES") {
            Object.innerHTML = "NO";
        }
        else {
            Object.innerHTML = "YES";
        }
    }

Try in jsfiddle

如何使用JavaScript更改文本onclick？

5 个答案: