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


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: