显示一行数据，单击下一步，隐藏原始行并显示下一行.等等

我正在使用 http://www.advancedcustomfields.com 插件在Wordpress中创建自定义字段。我专门使用中继器字段功能。

在页面上，我有一个具有无限行数的中继器。回显所有数据的常用方法如下：

<?php $counter = 1; if(get_field('step_by_step_training')): ?>
<?php while(the_repeater_field('step_by_step_training')): ?>
    <p class="training-<?php echo $counter; ?>"><?php the_sub_field('introduction'); ?></p>
<?php $counter++; endwhile; ?> 
<?php endif; ?>

是否可以使用下一个按钮一次显示一行数据，按下该按钮将显示下一行数据？我只想一次显示一行数据，因此如果最初显示第 1 行，则单击下一行时，它会隐藏第 1 行并显示第 2 行。本质上是一个循序渐进的过程。

最终，我想包含一个表单，以便用户可以提交数据。

更新：

<form class="form" method="POST" action="<?php the_permalink(); ?>">
<?php $counter = 1; if(get_field('step_by_step_training')): ?>
<?php while(the_repeater_field('step_by_step_training')): ?>    
    <div class="form-row">
        <p class="training"><?php echo the_sub_field('introduction'); ?></p>
        <button class="next">Next Form Element</button>
    </div>
<?php $counter++; endwhile; ?> 
<?php endif; ?>     
</form>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {    
    // hide all form-rows, but not the first one
    $('.form-row').not(':first').hide();
    $('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).parent('div.form-row').hide().next('div.form-row').show();
    });    
});
});
</script>

你可以用jQuery做一些简单的事情（我认为这就是你想要的？）：

$(document).ready(function() {  
  // prepend a 'previous' button to all form-rows except the first
  $('<button>').addClass('previous').text('Previous').prependTo($('.form-row').not(':first'));
  // hide all form-rows, but not the first one
  $('.form-row').not(':first').hide();
  // add the submit button to the last form-row
  $('<input>').prop('type', 'submit').val('Submit Form').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).parent('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).parent('div.form-row').hide().next('div.form-row').show();
});

}）;

一些示例标记：

<form action="index.php" method="post">
    <div class="form-row">
        <label for="forename">Forename</label>
        <input type="text" name="forename" />
        <button class="next">Next Form Element</button>
    </div>
    <div class="form-row">
        <label for="forename">Surname</label>
        <input type="text" name="surname" />
        <div style="clear: both;"></div>
        <label for="another">Another</label>
        <input type="text" name="another" />
        <button class="next">Next Form Element</button>
    </div>
    <div class="form-row">
        <label for="last">Last Form Element</label>
        <input type="text" name="last" />
    </div>
</form>

您可以根据需要向每个form-row添加任意数量的表单元素，这里有一个小提琴可以玩

编辑

这里需要注意的是，previous按钮是动态注入到 DOM 的，表单submit按钮也是如此（请注意我是如何从标记的最后一form-row中删除它的）

这是一个更新的小提琴

您可以从 jQuery 手风琴菜单开始。某些 CSS 将允许您最小化取消选择的行占用的空间。如果要根据某些可识别的特征（例如，ID 号）实际丢弃和检索某些行，则需要使用 AJAX。

您可以使用类似 JQuery 的内容编写自己的自定义方法。

为每一行分配一个类，并跟踪选择了哪一行，在查看另一行时，只需 .hide（）显示的那一行和 .show（）你想显示的那一行。

如果你想让你的HTML更干净，你可以使用JQuery .data（）功能为每个元素分配标识符，并以这种方式引用它们。

这在很大程度上取决于你对wordpress的限制，它的外观以及你的实际HTML布局。

全部写入屏幕后，除了第一行之外，您不能隐藏所有内容吗？然后每次单击按钮时，请将其隐藏所有内容并显示下一行。尝试使用 jquery 的 next（）函数。 jquery - next（）

啊，看来 deifwud 用更好的解释打败了我。

相关内容

最新更新

热门标签：