Question

我有一个带有以下内容的php foreach循环：

<div class="form-row">...</div>

这可以创建无限量的form-row div。我有下一个/后退按钮，一次只显示一个按钮，这样你就可以向前和向后移动行。

除此之外我有这个按钮：

<button class="test"></button>

我想做以下事情：

$('.form-row:last'){        
   $('button.test').show();
}

例如，如果它位于form-row div的最后一个元素上，我希望它显示按钮。

我该怎么做？

如果它在form-row循环中，那么我只会使用$('button.test').last().show();，但由于它不在其中，我不知道该怎么做。

这是我的完整代码：

                    <?php global $current_user;
                    get_currentuserinfo();
                    $user = $current_user->user_login; ?>
                    <form class="form" method="POST" action="<?php bloginfo('stylesheet_directory'); ?>/training-insert.php">
                        <input type="hidden" value="<?php echo $user; ?>" name="test-user" />
                        <input type="hidden" value="<?php echo the_title(); ?>" name="test-name" />
                        <?php $counter = 1; if(get_field('step_by_step_training')): ?>
                        <?php while(the_repeater_field('step_by_step_training')): ?>    
                            <div class="form-row">
                              <h2 style="float:left;margin-left:7px;">
                                <?php the_title(); ?>
                              </h2>
                              <h2 style="float:right;"><?php echo $counter; ?> of <?php echo $total; ?></h2>
                              <div class="clear"></div>
                              <div id="module-area" style="margin-top:0px!IMPORTANT;">
                                <div id="modules-top"></div>
                                <div id="modules-repeat">
                                  <p class="training"><?php echo the_sub_field('introduction'); ?></p>
                                  <?php if(get_sub_field('training_images')): ?>
                                  <?php while(has_sub_field('training_images')): ?>
                                  <img class="training" src="<?php echo the_sub_field('image'); ?>" />
                                  <?php endwhile; ?>
                                  <?php endif; ?>
                                  <p class="training"><?php echo the_sub_field('conclusion'); ?></p>
                                  <div class="inner"></div>
                                  <button class="next"></button>
                                  <button class="end"></button>
                                  <div class="clear"></div>
                                </div>
                                <div style="margin-bottom:5px;" id="modules-bottom"></div>
                              </div>
                            </div>
                        <?php $counter++; endwhile; ?> 
                        <?php endif; ?> 
                    </form>
                    <?php if (get_field('test') != "") { ?>
                        <form class="form" method="POST" action="<?php bloginfo('stylesheet_directory'); ?>/training-insert-alt.php">
                            <input type="hidden" value="<?php echo $user; ?>" name="test-user" />
                            <input type="hidden" value="<?php echo the_title(); ?>" name="test-name" />
                            <input type="hidden" value="<?php echo the_field('test'); ?>" name="test-link" />
                            <button class="test"></button>
                        </form>
                    <?php } ?>

            <div class="clear"></div>
            </div>
        </div>

    <?php endwhile; endif; ?>
    </div>

<?php get_footer(); ?>

<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {    

    // prepend a 'previous' button to all form-rows except the first
    $('<button>').addClass('previous').appendTo($('.inner').not(':first'));

    // hide all form-rows, but not the first one
    $('.form-row').not(':first').hide();

    // hide on last step
    $('button.next').last().hide();
    $('button.end').last().show();

if($('.form-row:last').is(':visible')) { 
   $('button.test').show();
} 

    // add the submit button to the last form-row
    // $('<input>').addClass('submit').prop('type', 'submit').val('My Dashboard').appendTo($('.form-row:last'));


    // handle the previous button, we need to use 'on' here as the
    // previous buttons don't exist in the dom at page load
    $('.form-row').on('click', 'button.previous', function(e) {
        e.preventDefault();
        $(this).parents('div.form-row').hide().prev('div.form-row').show();
    });

    $('button.next').click(function(e) {
        // prevent the next buttons from submitting the form
        e.preventDefault();
        // hide this form-row, and show the next one
        $(this).parents('div.form-row').hide().next('div.form-row').show();
    });       

});
});
</script>

Answer 1

if($('.form-row:last').is(':visible')) { 
   $('button.test').show();
}

将其包裹在一个函数中，并在每次显示下一行时调用它。或者将其直接包含在显示下一行的部分：

$('button.next').click(function(e) {
    // prevent the next buttons from submitting the form
    e.preventDefault();
    // hide this form-row, and show the next one
    $(this).parents('div.form-row').hide().next('div.form-row').show();

    if($('.form-row:last').is(':visible')) 
       $('button.test').show();
});

如果您想在按下上一个按钮时隐藏按钮：

$('.form-row').on('click', 'button.previous', function(e) {
    e.preventDefault();
    $(this).parents('div.form-row').hide().prev('div.form-row').show();
    $('button.test').hide();
});

Answer 2

我用它来工作：

$('.form-row').last().append($('button.test').show());

当显示循环的最后一个元素时，显示循环外的另一个元素

2 个答案: