jQueryクリックイベントは1回だけトリガーされます

Question

私のページには2つの異なるフォームがあります。ユーザーが一度に1つのフォームを表示し、ユーザーがリンクをクリックするとフォーム間を切り替えるようにします。

これを実現するには、両方のフォームにリンクを含め、clickイベントをバインドして、ユーザーが既に表示されているもの以外のフォームを表示するようにしました。

問題は、jQueryで実装できないということです。
はここに私のHTMLです：上記のHTMLコードで

<div class="col-md-6 loginPanel"> 
    <div class="panel panel-default myFormContainer"> 
    <div class="panel-heading myPanelHeadingContainer"> 
     <h3 class="panel-title"> 
     Login 
     <span class="flipper"> 
      <a href="#">Flip</a> 
     </span> 
     </h3> 
    </div> 
    <div class="panel-body"> 
     <form> 
     <div class="form-group"> 
      <label for="authCode">Authentication Code</label> 
      <input type="password" class="form-control" id="authCode" placeholder="Auth Code"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
    </div> 
    </div> 
</div> 

<div class="col-md-6 registerPanel"> 
    <div class="panel panel-default myFormContainer"> 
    <div class="panel-heading myPanelHeadingContainer"> 
     <h3 class="panel-title"> 
     Register 
     <span class="flipper"> 
      <a href="#">Flip</a> 
     </span> 
     </h3> 
    </div> 
    <div class="panel-body"> 
     <form> 
     <div class="form-group"> 
      <label for="newAuthCode">New Authentication Code</label> 
      <input type="password" class="form-control" id="newAuthCode" placeholder="New Auth Code"> 
     </div> 
     <div class="form-group"> 
      <label for="clientSecret">Client Secret</label> 
      <input type="password" class="form-control" id="clientSecret" placeholder="Client Secret"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
    </div> 
    </div> 

、私はspan内部リンクを包み、それをクラスflipperを与えています。

はここに私のjQueryのです：上記のコードで

$(document).ready(function() { 
    $('.registerPanel').first().hide(); 
    var flipper1 = $('.flipper').first(); 
    var flipper2 = $('.flipper').get(1); 

    flipper1.click(function() { 
    $('.loginPanel').first().hide(); 
    $('.registerPanel').first().show(400); 
    }); 

    flipper2.click(function() { 
    $('.registerPanel').first().hide(); 
    $('.loginPanel').first().show(400); 
    }); 
}); 

、私は意図的にその中に何かがクリックされた場合、spanのクリックイベントが発生しますと仮定span要素にクリックイベントをバインドさ。

また、flipper1およびflipper2は、2つの異なる形式に関する2つの変数を参照する2つの変数です。

最初はクリックが発生せず、イベントが発生しない場合、loginPanelが表示されることが予想されます（そのため、私はregisterPanelを隠しました）。
フリップリンクをクリックすると、loginPanelが非表示になり、registerPanelが表示されますが、registerPanelのリンクをクリックすると何も起こりません（つまり、loginPanelに戻ることはできません）。

誰かが何が間違っているのかを教えてください。可能であれば、良い解決策を提案してください。ありがとう！

Answer 1

.get()メソッドは、jQueryオブジェクトと一致するDOM要素を返します。そのため、2番目のクリックが発生していない可能性があります。

だから、あなたは次のようにここにeqセレクタを使用することができます。

$('.registerPanel').first().hide(); 
var flipper1 = $('.flipper:eq(0)'); 
var flipper2 = $('.flipper:eq(1)'); 

flipper1.click(function() { 
    $('.loginPanel').first().hide(); 
    $('.registerPanel').first().show(400); 
}); 

flipper2.click(function() { 
    $('.registerPanel').first().hide(); 
    $('.loginPanel').first().show(400); 
}); 

Answer 2

var flipper1 = $('.flipper').first(); 
var flipper2 = $('.flipper').last(); 

問題が.get(1)であり、イベントが.get()戻りDOM要素が、.first()と.last()としてそれに追加されません。 jQueryオブジェクトを返す。