JS以最简单的方式切换(显示)文本

时间:2015-07-12 19:35:34

标签: javascript html css toggle

我尝试切换以下一种方式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/

2 个答案:

答案 0 :(得分:2)

更新您的功能声明,请参阅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';
}

答案 1 :(得分:1)

您需要设置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>