CODEWITHSUNDEEP
phpjquerywordpressonclicklistenerclass-attributes
Lauren
Lauren

Reputation: 71

Use jQuery click event to remove the specific class attribute value in WordPress

I'm trying to get the onclick to remove .active class when clicked but its not working?

The trigger class is selected to remove the active class, but it doesn't do anything? I expect the .active class to be removed when the close button is clicked?

Am I missing something?

The close button doesn't do anything onclick? Can someone help?

<?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>

Upvotes: 3

Views: 50

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253824

To make your JavaScrit code effective, first replace in your HTML code:

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

with:

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

Then replace all your JavaScript code with:

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

    $('.trigger').on('click', function() {
        const postId    = $(this).data('id');
        var   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');
            });
        }
    });
});

Now it should work.

Explanations: With WordPress $ variable is not referencing jQuery, so you can start your code with jQuery(function($){ that will allow to reference jQuery in $ variable in jQuery ready() event.

Upvotes: 1

Related Questions