0

我正在使用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>
4

4 回答 4

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需要向每个表单元素添加任意数量的表单元素，这是一个可以玩的小提琴

编辑

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

这是一个更新的小提琴

于 2012-09-20T15:20:25.190 回答
0

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

于 2012-09-20T15:15:56.333 回答
0

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

为每一行分配一个类，并跟踪选择了哪一个，当查看另一行时，只需.hide( )正在显示的行和.show()您希望显示的行。

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

这大部分都取决于您对 wordpress 的约束、它的外观和您的实际 HTML 布局

于 2012-09-20T15:21:51.127 回答
0

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

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

于 2012-09-20T15:22:14.970 回答