加载时的增量JQuery函数

Question

我正在尝试创建一个javascript或jQuery函数(但对其他想法持开放态度)，它将基于此php函数回显HTML值的数量。

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

我使用的基本jQuery函数如下：

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

现在，我只需要一遍又一遍地重复这个函数，并连续替换数字，这样页面上的函数就会比实际对象多。这是因为php函数调用的info的范围从1到20。

寻找更优雅的解决方案。谢谢!

Answer 1

我会使用一个类，然后定位与所单击的内容相关的第二个div：

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