Question

我正在使用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行最初显示，则单击next时它会隐藏第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>

Answer 1

你可以使用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添加任意数量的表单元素，here's a fiddle to play with

修改

此处需要注意的是previous按钮会动态注入DOM，表单submit按钮也是如此（注意我是如何从上一个form-row删除它的在标记中）

Here's an updated fiddle

Answer 2

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

Answer 3

您可以使用JQuery之类的东西编写自己的自定义方法。

为每一行指定一个类，并在查看另一行时，跟踪显示的行，.hide()正在显示的行和.show()您要显示的行。

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

这大部分都取决于你对wordpress的限制，它的外观和方式。你的实际HTML布局

Answer 4

将它全部写入屏幕后，你不能只隐藏第一行以外的所有内容吗？然后每次单击按钮，让它隐藏所有内容并显示下一行。尝试使用jquery的next（）函数。 jquery - next()

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

显示一行数据，单击下一步，隐藏原始行并显示下一行......依此类推

4 个答案: