Question

<html>

<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>

<body>
<div align="center" style="margin-top:15%;">
    <div id="out" align="center" style="border-style:solid;border-width:1px;width:300px;">
        <div id="out_text" align="center" style="margin-top:20;height:40px;width:200px;">
        Welcome
        </div>
        <form method="post"> 
            Username: <input type="text" name="user"><br>
            Password: <input type="password" name="password"><br>
            <input id="login" type="submit" value="Login">
            <input id="add" type="submit" value="Add User">
        </form>

    </div>

    <div id="in" style="border-style:solid;border-width:1px;width:300px;">
        <div id="in_text" align="center" style="margin-top:20;height:40px;width:200px;">
        "test"
        </div>
        <form>
            <input id="logout" type="submit" id="logout" value="Logout">    
        </form>
    </div>

</div>

<script>
$(document).ready(function() {
    $('#out').show();
    $('#in').hide();
}); 

$('#login').click(function() {
    $('#out').hide();
    $('#in').show();
    $('#in_text').text("Success");
});

$('#logout').click(function() {
    $('#out').show();
    $('#in').hide();
    $('#out_text').text("Welcome");
});
</script>

</body>

</html>

所以我的问题是为什么我的$（文件）.ready在页面完成加载时隐藏了id =“in”的div？我以为这是怎么做的。我在这里错过了什么吗？我正在浏览各种教程，它看到他们做同样的事我正在做，但由于某种原因，我的jquery不起作用。

编辑：好的，谢谢你们，我能够隐藏另一个div。谢谢。但是，现在我有一个不同的问题。我正在尝试创建一个onclick事件处理程序，切换显示和更改文本的div。我编辑了如下代码，这里的任何人都可以找出它无效的原因吗？

Answer 1

您缺少)，更重要的是您没有在页面中包含jQuery。

<head>
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    ...
</head>

$(document).ready(function() {
    $('#out').show();
    $('#in').hide();
    $('#login').click(function() {
        $("p.hide-me-first").hide();
    }); // <---
}); // <---

Answer 2

通过检查您的控制台，您会发现您在事件处理程序中缺少两个关闭的parens。此外，它看起来不像你包括jquery。当javascipt不起作用时，请务必先检查控制台。

<html>

<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>

<body>
<div align="center" style="margin-top:15%;">
    <div id="out" align="center" style="border-style:solid;border-width:1px;width:300px;">
        <div id="out_text" align="center" style="margin-top:20;height:40px;width:200px;">
        Welcome
        </div>
        <form method="post"> 
            Username: <input type="text" name="user"><br>
            Password: <input type="password" name="password"><br>
            <input id="login" type="submit" value="Login">
            <input id="add" type="submit" value="Add User">
        </form>

    </div>

    <div id="in" style="border-style:solid;border-width:1px;width:300px;">
        <div id="in_text" align="center" style="margin-top:20;height:40px;width:200px;">
        "test"
        </div>
        <form>
            <input id="logout" type="submit" id="logout" value="Logout">    
        </form>
    </div>

</div>

<script>
$(document).ready(function() {
    $('#out').show();
    $('#in').hide();
}); //missing paren here

$('#login').click(function() {
    jQuery.cssRule("p.hide-me-first", "display", "none");
});  //missing paren here
</script>

</body>

</html>

http://jsbin.com/ihasev/2/edit

另外，请确保包含cssRule插件

Answer 3

这里有语法错误：

$('#login').click(function() {
  jQuery.cssRule("p.hide-me-first", "display", "none");
};

最后一行应该是：

});

如果脚本块中存在语法错误，则该块中的代码不会运行。

Answer 4

您忘了关闭$(document).ready();括号，您应该在<script>标记中写下：

$(document).ready(function() {
    $('#out').show();
    $('#in').hide();

    $('#login').click(function() {
        jQuery.cssRule("p.hide-me-first", "display", "none");
    });
});

我做了一个jsFiddle来展示这个解决方案。

为什么不隐藏我的div

4 个答案: