javascript - 单击时 HTML5 更改描述文本

Question

我的代码中有一个“a”标签，点击它会切换元素的可见性。

在 HTML 中我有:

<a href="#" onclick="toggle_visibility('foo');">Click here for details</a>
<div id="foo">
  <p>This is test</p>
</div>

此外，在我的 Javascript 中，我有:

function toggle_visibility(id) {
   var e = document.getElementById(id);
   e.value="New Button Text";
   if(e.style.visibility == 'visible')
      e.style.visibility = 'hidden';
   else
      e.style.visibility = 'visible';
}  

这工作正常(感谢 stackoverflow 的人)。

现在，我想要做的是，当我点击“点击此处查看详细信息”时，我希望实际文本本身更改为“关闭详细信息”。

“点此查看详情”->“关闭详情”

另外，我将如何更改文本的颜色，所以当它更改为“关闭详细信息”时，它会变成“红色”。我应该如何修改代码来执行此操作？

Answer 1

你可以这样做:

function toggle_visibility(el, id) {
    var e = document.getElementById(id);
    e.value = "New Button Text";
    if (e.style.visibility == 'visible')
        e.style.visibility = 'hidden';
    else
        e.style.visibility = 'visible';
    if (el.innerHTML == "Click here for details") {
        el.innerHTML = "Close the details";
        el.style.color = "red";
    }
    else {
        el.innerHTML = "Click here for details";
        el.style.color = null;
    }
}


<a href="#" onclick="toggle_visibility(this, 'foo');">Click here for details</a>