Incremental JQuery Function On Load

I am trying to create a javascript or jQuery function (but open to other ideas) that will echo the number of html values based upon this php function.

<?php if( have_rows('SECTION') ): $i = 0;
    while ( have_rows('SECTION') ) : the_row(); $i++; ?>
        <div id='NAME-<?php echo $i; ?>'><?php the_sub_field('OBJECT'); ?></div>
        <div id='NAME-<?php echo $i; ?>-p'><?php the_sub_field('OBJECT-2'); ?></div>
    <?php endwhile;
    else :
endif; ?>

The basic jQuery function that I’m using is this:

$(function () {
    $('#NAME-1').click(function () {
        $('#NAME-1-p').stop().fadeIn(500);
    });
});

Right now I just repeat that function over and over and replace the number consecutively so there ends up being more functions than actual objects on the page. This is because the info being called by the php function can range from 1 – 20.

Looking for a more elegant solution. Thanks!

Read more here: Incremental JQuery Function On Load

Leave a Reply

Your email address will not be published. Required fields are marked *