jquery显示和隐藏

时间:2013-07-22 13:02:51

标签: javascript jquery html

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

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 fadeIn并隐藏而不是使用document.getElementByid方法时,它现在不起作用。为什么呢?

4 个答案:

答案 0 :(得分:5)

为了通过id使用jQuery选择元素,您必须使用selector syntax,这意味着在{id}中附加#。所以,改变

 $(id).fadeIn(); 

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

答案 1 :(得分:0)

试试这个:

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

答案 2 :(得分:0)

由于jquery适用于您,您不会编写crossbrowser代码。

如此简单

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

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

答案 3 :(得分:0)

您可以将它声明为变量,然后将其包装在jQuery选择器中:

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

jsFiddle