我试图在单击某个项目时显示弹出窗口。单击项目后会添加 .active 类,但是一旦该类处于活动状态,如何添加弹出容器?
我相信这是我添加一个操作来显示弹出窗口的地方?
if ($(this).hasClass("active")) { // 如果触发器已经处于活动状态,则在此执行某些操作 回声
请看下面的代码:
<?php
$panelhead = $args['panelhead'];
$panelintro = $args['panelintro'];
// NOT HERE!
// $teamid = get_the_ID();
?>
<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 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" id="<?php echo "target-".$teamid; ?>">
<div id="overlay"></div>
<div id="popup">
<div class="popupcontrols">
<span id="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 SHOULD BE IN YOUR GLOBAL JS FUNCTIONS, NOT HERE, BUT I'VE LEFT IT HERE FOR THE PURPOSES OF THIS DEMONSTRATION -->
<script type="text/javascript">
// Initialize Variables
var closePopup = document.getElementById("popupclose");
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
var link = document.getElementById("<?php echo $teamid ?>");
// SET POPUP(TARGET) BEHAVIOUR WHEN CLICKING A MATCHING TRIGGER ID
$("[id^='trigger-".$teamid;']").on("click", function() {
var id = parseInt(this.id.replace("trigger-".$teamid;", ""), 10);
var thetarget = $("#target-" + id);
if ($(this).hasClass("active")) {
// Do something here if the trigger is already active
echo
} 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
closePopup.on("click", function() {
overlay.style.display = 'none';
popup.style.display = 'none';
});
</script>
更换
this.id.replace("trigger-".$teamid;", "")
由
this.id.replace("trigger-" + <?php echo $teamid; ?>, "")