单击时添加和删除类（在 wordpress 循环中）答案

【问题标题】：Adding and Removing class on clicks (in wordpress loop)单击时添加和删除类（在 wordpress 循环中）
【发布时间】：2017-04-11 12:54:03
【问题描述】：

所以我有一个 wordpress 循环来显示某些帖子。每个帖子都有一个模式，我将在其中显示每个模式，每个模式都由 .modal-trigger 类触发。但是，因为有多个帖子，我想阻止用户一次打开多个模式，这就是为什么我想在单击 .modal-trigger 类后删除它。然后，单击 .fa-close 后，我将添加 .modal-trigger

我的主要目标是在单击 .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');
    });
});

感谢您的帮助！

【问题讨论】：

标签： javascript php jquery wordpress

【解决方案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;
        }
    });
});

这样您就可以跟踪活动的模态，并且只允许在没有打开的模态时打开模态，并在有打开的模态时关闭它们。

【讨论】：