-4 
<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>

所以我的问题是为什么我的 $(document).ready 在页面完成加载时不隐藏 id="in" 的 div？我认为这就是它的完成方式。我在这里错过了什么吗？我浏览了各种教程，发现它们和我做的一样，但由于某种原因，我的 jquery 无法正常工作。

编辑：好的，多亏了你们，我能够隐藏另一个 div。谢谢你。但是，现在我有一个不同的问题。我正在尝试制作一个 onclick 事件处理程序来切换要显示和更改文本的 div。我编辑了以下代码，这里的任何人都可以弄清楚为什么它不起作用？

4

4 回答 4

2

通过检查您的控制台，您会发现您的事件处理程序中缺少两个结束括号。此外，它看起来不像您包含 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 插件

于 2013-02-23T22:35:01.430 回答
2

你错过了)，更重要的是你没有在你的页面中包含 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();
    }); // <---
}); // <---
于 2013-02-23T22:30:03.207 回答
0

你忘了关闭$(document).ready();括号，你应该在你的<script>标签中写下这个：

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

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

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

于 2013-02-23T22:33:43.727 回答
0

你在这里有一个语法错误：

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

最后一行应该是：

});

当脚本块中出现语法错误时，该块中的代码将不会运行。

于 2013-02-23T22:32:06.190 回答