使用jquery切換多個元素類

Question

我創建了多個表單輸入字段，當使用點擊輸入字段時，將會隱藏彈出窗口。

Fiddle HERE

工作原理：

當輸入字段一個類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 Ë容器，當用戶點擊並把它添加到當前點擊的場容器，e.g：

$('.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>