點擊添加和刪除類（在wordpress循環中）

Question

所以我有一個wordpress循環來顯示特定的帖子。每篇文章都有一個模式，我將在其中顯示，每個模式都由.modal-trigger類觸發。但是，因爲有多個帖子我想阻止用戶一次打開多個模式，這就是爲什麼我想要在點擊之後刪除.modal-trigger類的原因。那麼我就要addClass的.modal觸發一旦.fa關閉點擊

我的主要目的是，一旦它被點擊刪除.modal-trigger類，並添加該類一旦.fa-close類被點擊

<section class="meet-the-team"> 
    <div class="inner"> 
      <?php 
       $team = new wp_query (array(
        'post_type' => 'team', 
        'orderby' => 'date', 
        'order'  => 'ASC' 
       )); 
       if($team->have_posts()): 
        while($team->have_posts()): 
         $team->the_post(); 
      ?> 
      <div class="team-section"> 
      <p class="team-header"><?php the_title(); ?></p> 
      <p class="team-details"><?php the_field('person_job_title'); ?></p> 

     <button class="button modal-trigger ">Read More</button> 

        <!-- MODAL SECTION FOR READ MORE POSTS --> 
        <div class="my-Modal"> 
        <i class="fa fa-close"></i> 
        <?php the_title(); ?> 
        <p><?php the_field('person_job_title'); ?></p> 
        <?php the_content(); ?> 
        </div> 
       <!-- ENDING OF MODAL SECTION --> 
     </div> 
      <?php 
       endwhile; 
       else: "no posts available" ; 
       endif; 
       wp_reset_postdata(); 
       ?> 

我的jquery

$(document).ready(function(){ 
    $('.modal-trigger').click(function(){ 
     var post_content = $(this).parent('.team-section').find('.my-Modal').fadeIn().css('transform' , 'translate(0px , 15%)'); 
     $('.button .modal-trigger').removeClass('modal-trigger'); 
    }); 
    $('.fa-close').click(function(){ 
     $('.my-Modal').fadeOut().css('transform' , 'translate(0px , 5%)'); 
     $('.button .modal-trigger').addClass('modal-trigger'); 
    }); 
}); 

謝謝你的幫助！

Answer 1

這將無法正常工作，因爲您的打開點擊會將您用於「關閉」的類刪除。從本質上講，你儘量選擇下列元素不存在了：

$('.button .modal-trigger').addClass('modal-trigger');

我有一個全局變量去阻止所有點擊活躍的時候，這樣的事情：

$(document).ready(function(){ 

    var hasActiveModal = false; 

    $('.modal-trigger').click(function(){ 
     if(!hasActiveModal) { 
      hasActiveModal = true; 
      var post_content = $(this).parent('.team-section').find('.my-Modal').fadeIn().css('transform' , 'translate(0px , 15%)'); 
      return; 
     } 
    }); 
    $('.fa-close').click(function(){ 
     if(hasActiveModal) { 
      hasActiveModal = false; 
      $('.my-Modal').fadeOut().css('transform', 'translate(0px , 5%)'); 
      return; 
     } 
    }); 
}); 

通過這種方式，您可以跟蹤活動模態，並且只允許在沒有開放模態時打開模態，並且在模態打開時關閉它們。