Incremental JQuery-Funktion On Load

Question

Ich versuche, ein Javascript oder jQuery-Funktion (aber offen für andere Ideen) zu erstellen, die die Anzahl der HTML-Werte auf diese PHP-Funktion basieren wird echo.

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

Die grundlegende jQuery-Funktion, die ich benutze, ist dies:

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

Im Moment habe ich nur wiederholen, dass die Funktion immer und immer und ersetzen die Anzahl nacheinander so endet es als tatsächlich mehr Funktionen zu sein Objekte auf der Seite. Dies liegt daran, dass die von der PHP-Funktion aufgerufenen Informationen im Bereich von 1 - 20 liegen können.

Auf der Suche nach einer eleganteren Lösung. Vielen Dank!

Answer 1

würde ich eine Klasse verwenden und dann die zweite div relativ zu lokalisieren, was geklickt wurde:

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

$(function() { 
    $('.clickable').click(function() { 
     $(this).next().stop().fadeIn(500); 
    }); 
});