JQueryでのdivの非表示と表示

私はdivを非表示にしたいボタンをクリックします。ここで私は2つのdiv(ログインとコンテナ)を持っています。ページが読み込まれると、コンテナは非表示になります。 #submitボタンをクリックすると、コンテナdivを表示してログインdivを非表示にします。

問題は、ページがロードされたときにログインページが表示されているが、ボタンをクリックした後でdivを非表示にすることはできない

Javascript:

<script>
    $('#submit').click(function() {
        console.log("Called2")

        $('#container').show();
        $('#login').hide();
    });
</script>

HTML:

<div id="login" >
    <div id="loginformcontainer">
        <form>
            
            
            <div class="buttons1">
                <button type="button" id="submit" value="Login" class="btn">
                    Submit
                </button>
                <button type="reset"  id="reset" value="Reset"  class="btn">
                    Clear All
                </button>
            </div>
            <div>
            <div id="container" style="display: none;">
                
Index Page

</div>
0
あなたはPの中にDIVを置くことはできません。
追加された 著者 Derek S. Henderson,

6 答え

document.ready にあなたのコードを書くように書けば、

$(document).ready(function(){
    $('#submit').click(function() {
       console.log("Called2")
       $('#container').show();
       $('#login').hide();
    });
});

またはその略語、

$(function(){
    $('#submit').click(function() {
       console.log("Called2")
       $('#container').show();
       $('#login').hide();
    });
});

toggle()function を使用するたびに視認性を変更するために、

$(function(){
    $('#submit').click(function() {
       console.log("Called2")
       $('#container, #login').toggle();
    });
});
1
追加された
@Ash私の更新された回答の最後のものをチェックしてください( toggle オプション付き)。
追加された 著者 Rohan Kumar,
Cotainer divは現在表示されていません。ログインは完全に隠れています...空の文字列を表示するとgetElementbyIdに渡されます警告
追加された 著者 Ash,
ロハンありがとう!それは今働いている..コンテナはクラスです..
追加された 著者 Ash,

See if this is the issue, you have not a closing </div> tag here:

   </div>
   <div> //<----------------here you can see an opening tag instead
      <div id="container" style="display: none;">

put a closing </div> above.

and try putting your script in doc ready:

 $(function(){
    $('#submit').click(function() {
      console.log("Called2")
      $('#container').show();
      $('#login').hide();
    });
 });
1
追加された

ポストバックを引き起こすボタンを送信していないので、JavaScriptスタイルのCSSスタイルが失われています。

1
追加された
これはコメントです。
追加された 著者 Derek S. Henderson,

フォームを処理するサブミット・ボタンであるため、サブミット・イベントがより有用かもしれません。このようにして、送信を検証して防止することができます。

送信のためのjQueryドキュメントを確認してください。

0
追加された

Look on the demo

$('#container').hide();
$('#submit').click(function() {
    console.log("Called2")

    $('#container').show();
    $('#login').hide();
})

I believe that you not declare the <div id="container" ></div>

Write your script in document.ready inside the <script> function so it work...

Or you can't declare the library of Jquery.

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
0
追加された

あなたのhtml

 <div id="signIn" >Sign In</div>
<div id="login" >
<div id="loginformcontainer">

                <form>
                    
                    
                    <div class="buttons1">
                        <button type="button" id="submit" value="Login" class="btn">
                            Submit
                        </button>
                        <button type="reset"  id="reset" value="Reset"  class="btn">
                            Clear All
                        </button>
      </div>
 <div>

Your Jquery

 $('#login').hide();
    $('#signIn').click(function() {
        alert("try");
    });

    $("#submit").click(function() { 
         $('#login').fadeOut();
        //do your code
    });

Upon page loads, the login div will hide and if you click the sign in then login div will just fade in. If the user clicks the submit button, before you hide the login div, make sure you will validate the user action. Refer to jQuery documentation for further explanation.

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript