JS 切换（显示）文本最简单的方法

Question

我正在尝试以下一种方式更改可见性（显示）文本 http://jsfiddle.net/xL8hyoye/。它不起作用，但应该可以。

HTML 代码在这里：

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

JS代码在这里：

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

(code from this source http://blog.movalog.com/a/javascript-toggle-visibility/)

替换时解决：

function toggle_visibility(id) {

作者：

toggle_visibility = function(id) {

（感谢 Zakaria Acharki）。

这是可见变量区域的原因，在第一种情况下 - JSFiddle 外部库设置（设置无库后需要设置 'No wrap in head'）。正如 amit.rk3 在这里所说的类似主题

Inline event handler not working in JSFiddle

这里证明（js和html代码没有改变，只有'No wrap in head'设置）http://jsfiddle.net/xL8hyoye/3/

Answer 1

更新您的函数声明，请参阅 working Fiddle :

toggle_visibility = function(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

Answer 2

您需要设置div元素的初始CSS显示值（默认设置为块，但JS无法访问）。

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo" style="display: block;">This is foo</div>

或检查 style.display 是否为空

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block' || e.style.display == '')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

JS 切换（显示）文本最简单的方法

JS Toggle (display) text the simplest way

html

javascript

css

toggle