使用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>