使用jQuery点击事件删除WordPress中特定的类属性值

Question

我试图让 onclick 在单击时删除 .active 类，但它不起作用？

选择了触发器类来移除活动类，但它没有做任何事情？我希望单击关闭按钮时删除 .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 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 id="overlay"></div>
                <div id="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 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
    $("['.trigger']").on("click", function() {
        var id = parseInt(this.id.replace("trigger-" + <?php echo $teamid; ?>, ""), 10);
        var thetarget = $("#target-" + id);
        if ($(this).hasClass("active")) {
            // Do something here if the trigger is already active
        } else {
            // Close Popup Event
            $('.popupclose').on("click", function() {
                $('.trigger').removeClass("active");
                $('.target').removeClass("active");
            });
        }
    });
</script>

Answer 1

为了使您的 JavaScrit 代码有效，请首先在 HTML 代码中替换：

<a class="trigger" id="<?php echo "trigger-".$teamid; ?>">

与：

<a class="trigger" data-id="<?php echo $teamid; ?>">

然后将所有 JavaScript 代码替换为：

jQuery(function($){
    // Initialize Variables
    const closePopup = $('#popupclose'),  
          overlay    = $('#overlay'),
          popup      = $('#popup');

    $('.trigger').on('click', function() {
        const postId    = $(this).data('id'),
              theTarget = $('#target-'+postId);

        console.log(postId); // For testing (to be removed)

        if ( $(this).hasClass('active') ) {
            // Do something here if the trigger is already active
        } else {
            // Close Popup Event
            $('.popupclose').on('click', function() {
                $('.trigger[data-id='+postId+']').removeClass('active');
                theTarget.removeClass('active');
            });
        }
    });
});

现在应该可以了。

说明： 使用 WordPress

$

变量不引用 jQuery，因此您可以使用

jQuery(function($){

开始代码，这将允许在 jQuery $ 事件

中的 

ready() 变量中引用 jQuery。