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函数调用的信息范围为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);
    });
});

加载时增量JQuery函数

1 个答案: