Question

所以我有一个wordpress循环来显示某些帖子。每个帖子都有一个我将显示的模态，每个模态都由.modal-trigger类触发。但是，因为有多个帖子我想阻止用户一次打开多个模式，这就是为什么我想在点击后删除.modal-trigger类。然后，一旦单击.fa-close，我将添加.class -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');
    });
});

谢谢你的帮助！

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;
        }
    });
});

通过这种方式，您可以跟踪活动模态，并且只允许在没有打开模态时打开模态，并在模态打开时关闭它们。

在点击上添加和删除类（在wordpress循环中）

1 个答案: