jqueryで複数の要素のクローズを切り替える

Question

入力フィールドをクリックすると非表示のポップアップが表示される複数のフォーム入力フィールドを作成しました。

Fiddle HERE

仕組み：入力フィールド1クラスis-displayed上のユーザーのクリックがdiv要素の親protect-field-containerを追加する

。ユーザーが入力フィールド2をクリックすると、クラスis-displayedが要素1から削除され、要素2に追加されます。

私はそれが働きたいと思うようにこの機能を働かせるようには思えません。以下は私のコードのスニペットです。

のjQuery：

$('.popUp-block').on("click", function(){ 
    var $popUp = $(this).closest('.protect-field-container') 

    if ($popUp.hasClass('is-displayed')) { 
     $popUp.toggleClass('is-displayed'); 
    } else { 
     $popUp.addClass('is-displayed'); 
    } 
}); 

HTML：あなたはこのような場合にはトグルを使用する必要はありません

<div class="field-container"> 
    <div class="protect-field-container two-cols col-md-4"> 

     <article class="protect-field planner-form"> 
      <label for="#">Who shall we think about ? <i class="fa fa-question-circle"></i></label> 
      <input type="text" class="characters popUp-block"> 
      <i class="valid-checked fa fa-check-circle"></i> 
      <i class="invalid-checked fa fa-times-circle"></i> 
     </article> 

     <div class="protect-popup"> 
      <h3>Permanent Total and Partial Disability</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p> 
      <a href="#">More information</a> 
      <span>&euro; 100,000 - &euro; 50,000</span> 
     </div> 

    </div> 
</div> 

Answer 1

Working fiddle

、あなただけのクラスを削除することができis-displayed全員からユーザーのクリックとは、現在のクリックされたフィールドコンテナに追加する電子コンテナ、例えばは：

$('.popUp-block').on("click",function() { 
    //Remove class from all the containers 
    $('.protect-field-container').removeClass('is-displayed'); 

    //Add class to the current clicked container 
    $(this).closest('.protect-field-container').addClass('is-displayed'); 
}); 

それともshow/hideの機能を使用することによって、それを作ることができ、例えば、怒鳴るを確認してください。

これが役に立ちます。

---

$('.protect-popup').hide(); 
 

 
$('.popUp-block').on("click",function() { 
 
    $('.protect-popup').hide(); 
 
    $(this).closest('.protect-field-container').find('.protect-popup').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field-container"> 
 
    <div class="protect-field-container two-cols col-md-4"> 
 
    <article class="protect-field planner-form"> 
 
     <label for="#">Who shall we think about ? <i class="fa fa-question-circle"></i></label> 
 
     <input type="text" class="characters popUp-block"> 
 
     <i class="valid-checked fa fa-check-circle"></i> 
 
     <i class="invalid-checked fa fa-times-circle"></i> 
 
    </article> 
 
    <div class="protect-popup"> 
 
     <h3>Permanent Total and Partial Disability</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p> 
 
     <a href="#">More information</a> 
 
     <span>&euro; 100,000 - &euro; 50,000</span> 
 
    </div> 
 
    </div> 
 

 
    <div class="protect-field-container two-cols col-md-4"> 
 
    <article class="protect-field planner-form"> 
 
     <label for="#">How many childern do have ? <i class="fa fa-question-circle"></i></label> 
 
     <input type="text" name="" class="characters popUp-block"> 
 
     <i class="valid-checked fa fa-check-circle"></i> 
 
     <i class="invalid-checked fa fa-times-circle"></i> 
 
    </article> 
 
    <div class="protect-popup"> 
 
     <h3>Permanent Total and Partial Disability</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p> 
 
     <a href="#">More information</a> 
 
     <span>&euro; 100,000 - &euro; 50,000</span> 
 
    </div> 
 
    </div> 
 
    <div class="protect-field-container two-cols col-md-4"> 
 
    <article class="protect-field planner-form"> 
 
     <label for="#">Who shall we think about ? <i class="fa fa-question-circle"></i></label> 
 
     <input type="text" class="characters popUp-block"> 
 
     <i class="valid-checked fa fa-check-circle"></i> 
 
     <i class="invalid-checked fa fa-times-circle"></i> 
 
    </article> 
 
    <div class="protect-popup"> 
 
     <h3>Permanent Total and Partial Disability</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p> 
 
     <a href="#">More information</a> 
 
     <span>&euro; 100,000 - &euro; 50,000</span> 
 
    </div> 
 
    </div> 
 
</div>