2013-07-22 40 views
0

我有一个javascript代码,当单击链接时,它可以显示和隐藏页面的分区。jquery显示和隐藏

function shoh(id) { 

    if (document.getElementById) { // DOM3 = IE5, NS6 
     if (document.getElementById(id).style.display == "none"){ 
      $(id).fadeIn();  
     } else { 
      $(id).hide(); 
     } 
    } else { 
     if (document.layers) { 
      if (document.id.display == "none"){ 
       document.id.display = 'block'; 
      } else { 
       document.id.display = 'none'; 
      } 
     } else { 
      if (document.all.id.style.visibility == "none"){ 
       document.all.id.style.display = 'block'; 
      } else { 
       document.all.id.style.display = 'none'; 
      } 
     } 
    } 
} 

然而现在,当我加入jQuery的淡入不起作用并隐藏,而不是使用document.getElementById方法。为什么?

+0

你有没有添加了jQuery库加载这一页? – Dom

+1

为什么你在2013年使用2000年的这个可怕的兼容性代码?你甚至不需要在这里使用jQuery,所有*浏览器今天都支持'getElementById'。 – Jon

回答

5

为了通过jQuery选择一个元素,你必须使用selector syntax这意味着将#添加到id。因此,改变

$(id).fadeIn(); 

$("#" + id).fadeIn(); 
+0

您的传奇!非常感谢你 – user2166538

+0

显然不能接受8分钟 – user2166538

+0

@ user2166538,谢谢考虑 – Satpal

0

试试这个:

function shoh(id) { 
    var el = $('#' + id); 
    if (el.is(':visible')) { 
     el.hide(); 
    } else { 
     el.fadeIn(); 
    } 
} 
0

由于jQuery的为你工作,你会不会写代码,跨浏览器。

所以,简单地

var $el = $('#'+id); // <-- this is the main key :-) 

if ($el.css('display') == "none"){ 
     $el.fadeIn();  
} else { 
     $el.hide(); 
} 
0

你可以只声明为一个变量,然后在jQuery选择把它包装:

var $el = $(document.getElementById(id)); 
// if 
$el.fadein(); 
//else 
$el.hide(); 

jsFiddle

+0

$($ el)是无用的,因为$ el已经是jquery对象。 :-) –