Jquery .hide没有按预期工作。没有错误和空白控制台

时间:2012-12-16 08:56:16

标签: jquery show-hide

我在.click里面有一个jQuery函数,它不起作用。我已经测试了jQuery并且它正在工作但是已经尝试了多种组合作为.click中的测试,并且由于某种原因,事情无法正常工作。控制台是空白的,并表示没有错误。但它确实说它无法找到我定义的任何变量......

HTML:

<body>
    <section id="container_header">
        <header>
            <nav>
                <a id="home">Home</a>
                <a id="about">About</a>
                <a id="work">Work</a>
                <a id="contact">Contact</a>
            </nav>
        </header>
    </section>
    <section id="container_content">
        <div class="section" id="section-home"></div>
        <div class="section" id="section-about"></div>
        <div class="section" id="section-work"></div>
        <div class="section" id="section-contact"></div>
    </section>

使用CSS我正在渲染空div并且它们正确显示。现在为js:

        $(function(){
            $(this).click(function(){
                var pid = $(this).attr("id"); //console says this var is not defined???
                $(this).hide(); //even this does not work???
                //$("div[id^=section-]").hide(); //this works just fine???
                //$(this).closest("#container_header").hide(); //not working???
                //$(this).closest("body").find("#section-" + pid).show(); //no likey???
                //alert("h"); //works
            });
        });

上面的评论描述了有用的东西和不起作用的东西。这可能是愚蠢的,但我看不到它。是的,在测试时我会在尝试之前删除评论。

3 个答案:

答案 0 :(得分:2)

ready处理程序中,this绑定到文档本身。既然你写了:

$(function() {
    $(this).click(function() {  // Here, 'this' is 'document'.
        var pid = $(this).attr("id");
        $(this).hide();
    }
});

您正在尝试获取文档的id属性(不存在),然后隐藏文档本身,这是无法实现的。

尝试匹配公开<div>类的section元素:

$(function() {
    $("div.section").click(function() {
        var pid = $(this).attr("id");
        $(this).hide();
    }
});

答案 1 :(得分:1)

也许这就是你想要的,你的第一个this使用不当,它应该是一个标签选择器。

$(function() {
  $('#container_header a').click(function() {
    $('#container_content > div').hide();
    $('#section-'+this.id).show();
  });
});

答案 2 :(得分:0)

您可以使用以下命令删除所有控制台日志:

if ( window.console && window.console.log ) {  console.clear(); }