javascript - jquery 显示和隐藏

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 和 hide 而不是使用 document.getElementByid 方法时，它现在不起作用。为什么？

Answer 1

为了使用 jQuery 通过 id 选择元素，您必须使用选择器语法，这意味着将 a 附加#到 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 为您工作，您不会编写跨浏览器代码。

如此简单

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