Question

我有一个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方法时，它现在不起作用。为什么呢？

Answer 1

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

 $(id).fadeIn();

到

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

Answer 2

试试这个：

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

Answer 3

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

如此简单

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

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

Answer 4

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

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

jsFiddle

jquery显示和隐藏

4 个答案: