如何让关闭按钮在弹出窗口上工作？

Question

我一直在尝试让我的代码正常工作一段时间，唯一不起作用的是关闭按钮。谁能发现我错在哪里吗？

弹出框是使用自定义帖子类型从 WP 动态生成的。数据正常并出现弹出窗口，但关闭按钮不起作用？

单击 onclick 后，应删除活动类。

我的代码：

            <?php
            $panelhead = $args['panelhead'];
            $panelintro = $args['panelintro'];
            // NOT HERE!
            // $teamid = get_the_ID();
            ?>
            <a id="team"></a>
            <div class="fullcol pb-team-panel pb-padding">
            <div class="midcol clearfix">

            <div class="fullcol copy-wrapper clearfix">
            <div class="team-intro copycol anim-target bottomfade-fm-dm">
                <h3><?php echo $panelhead; ?></h3>
                <p><?php echo $panelintro; ?></p>
            </div>
            </div>

            <div class="fullcol team-grid">
            <?php 
            // HERE IS THE QUERY LOOP, YOU NEED TO SET THE ID AFTER THIS QUERY OTHERWISE YOU'LL ONLY BE RETURNING THE ID OF THE CURRENT PAGE AND NOT THE TEAM MEMBER.
            $recent = new WP_Query("post_type=team&posts_per_page=-1"); while($recent->have_posts()) : $recent->the_post();
            // HERE!
            $teamid = get_the_ID();
            $teamimg = get_field('team_image');
            ?>

            <!-- The visible team item(s) -->
            <div class="team-item anim-target bottomfade-fm-dm">           
                <a class="trigger" id="<?php echo "trigger-".$teamid; ?>">
                    <div class="team-image bg-image rounded-box" style="background-image: url(<?php echo $teamimg['url']; ?>);"></div>
                    <h4><?php the_title(); ?></h4>
                    <p><?php the_field('team_jobtitle'); ?></p>
                </a>
            </div>

            <!-- The popup item(s) -->
            <!-- popup start -->
            <div class="team-popup target" id="<?php echo "target-".$teamid; ?>">
                <div class="overlay"></div>
                <div class="popup">
                    <div class="popupcontrols">
                        <span class="popupclose">X</span>
                    </div>
                    <div class="popupcontent">
                        <div class="g3">
                            <img src="<?php echo $teamimg['url']; ?>" />
                            <a class="nexbtn" href="<?php the_field('team_linkedin'); ?>" target="_blank" rel="noopener noreferrer">Follow <?php the_title(); ?> on LinkedIn</a>
                        </div>
                        <div class="g7">
                            <h4><?php the_title(); ?></h4>
                            <p><?php the_field('team_bio'); ?></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- popup end -->

            <?php endwhile; wp_reset_postdata(); ?>
                    
            </div>
                
            </div>
            </div>

            <script type="text/javascript">
            // SET POPUP(TARGET) BEHAVIOUR WHEN CLICKING A MATCHING TRIGGER ID
            $("[id^='trigger-']").on("click", function() {
                var id = parseInt(this.id.replace("trigger-", ""), 10);
                var thetarget = $("#target-" + id);
                if ($(this).hasClass("active")) {
                    // Do something here if the trigger is already active
                } else {
                    // Do something here if the trigger is not active
                    // Remove active classes from triggers in general
                    $('.trigger').removeClass("active");
                    // Remove active classes from targets in general
                    $('.target').removeClass("active");
                    // Add active class to this trigger
                    $(this).addClass("active");
                    // Add active class to this target
                    $(thetarget).addClass("active");
                }
            });

            // Close Popup Event
            $('.popupclose').on("click", function() {
                console.log('Button test!');
                $('.trigger').removeClass("active");
                $('.target').removeClass("active");
            });
            </script>

Answer 1

准备好一个片段后，我可以看到它正在工作。

// SET POPUP(TARGET) BEHAVIOUR WHEN CLICKING A MATCHING TRIGGER ID
$("[id^='trigger-']").on("click", function() {
  var id = parseInt(this.id.replace("trigger-", ""), 10);
  var thetarget = $("#target-" + id);
  if ($(this).hasClass("active")) {
    // Do something here if the trigger is already active
  } else {
    // Do something here if the trigger is not active
    // Remove active classes from triggers in general
    $('.trigger').removeClass("active");
    // Remove active classes from targets in general
    $('.target').removeClass("active");
    // Add active class to this trigger
    $(this).addClass("active");
    // Add active class to this target
    $(thetarget).addClass("active");
  }
});

// Close Popup Event
$('.popupclose').on("click", function() {
  console.log('Button test!');
  $('.trigger').removeClass("active");
  $('.target').removeClass("active");
});

.team-popup {
  display: none;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<!-- The visible team item(s) -->
<div class="team-item anim-target bottomfade-fm-dm">
  <a class="trigger" id="trigger-12">
    <div class="team-image bg-image rounded-box"></div>
    <h4>
      The title
    </h4>
    <p>
      team job title
    </p>
  </a>
</div>

<!-- The popup item(s) -->
<!-- popup start -->
<div class="team-popup target" id="target-12">
  <div class="overlay"></div>
  <div class="popup">
    <div class="popupcontrols">
      <span class="popupclose" style="cursor:pointer">X</span>
    </div>
    <div class="popupcontent">
      <div class="g3">
        <img src="https://picsum.photos/200" />
      </div>
      <div class="g7">
        <h4>
          the title
        </h4>
        <p>
          team bio
        </p>
      </div>
    </div>
  </div>
</div>
<!-- popup end -->