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';
}

（来自此来源的代码 http://blog.movalog.com/a/javascript-toggle-visibility/）

更换时解决：

function toggle_visibility(id) {

通过：

toggle_visibility = function(id) {

（感谢Zakaria Acharki）。

这是可见变量区域的原因，并且在第一种情况下 - JSFiddle extern库设置（在设置无库之后需要设置＆＃39;没有包裹在头部＆＃39;）。正如amit.rk3在这里所说的类似主题

Inline event handler not working in JSFiddle

这里的证明（js和html代码没有改变，只有＆＃39;没有包裹在头部＆＃39;设置中）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以最简单的方式切换（显示）文本

2 个答案: