Çoklu öğe geçişlerini jquery ile değiştirme

Question

Giriş alanında tıklatıldığında gizli bir açılır pencerenin yer alacağı çoklu form girdi alanları oluşturdum.

Fiddle HERE

Nasıl çalışır: giriş alanında bir sınıf is-displayed kullanıcı tıklama div ebeveyn protect-field-container eklenir

. Kullanıcı giriş alanına iki tıkladığında, is-displayed sınıfı birinci elemandan çıkarılır ve ikinci öğeye eklenir.

Bu işlevi çalışmasını istediğim şekilde çalışmak için görünmüyor gibi görünmüyor. Aşağıda kodumun bir pasajı var.

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

Bu durumda geçiş öğesini kullanmak zorunda değilsiniz, sadece sınıf kaldırabilirsiniz Her şeyden is-displayed kullanıcı tıklayın ve güncel tıklanan alan konteynerine eklemeniz e kaplar, örneğin:

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

Ya da sadece show/hide işlevleri kullanarak bunu yapabiliriz, örneğin feryat edin.

Bu yardımcı olur umarım.

---

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