-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を非表示にすることができました。ありがとうございました。しかし、今私は別の問題を抱えています。どの div を表示してテキストを変更するかを切り替える onclick イベント ハンドラを作成しようとしています。私は次のようにコードを編集しました。

4

4 に答える 4

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 に答える
2

コンソールを確認すると、イベント ハンドラーに 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 に答える
0

ここに構文エラーがあります：

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

その最後の行があるはずです：

});

スクリプト ブロックに構文エラーがある場合、そのブロック内のコードは実行されません。

于 2013-02-23T22:32:06.190 に答える
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 に答える