0

http://www.advancedcustomfields.comプラグインを使用して、Wordpressでカスタムフィールドを作成しています。私は特にリピーターフィールド機能を使用しています。

1つのページに、行数に制限のないリピーターがあります。すべてのデータをエコーアウトする通常の方法は次のとおりです。

<?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行のデータのみを表示したいので、行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（）機能を使用して、各要素に識別子を割り当て、その方法でそれらを参照することもできます。

これのほとんどは、ワードプレスの制約、外観、実際のHTMLレイアウトに依存します

于 2012-09-20T15:21:51.127 に答える
0

すべて画面に書き込まれた後、最初の行以外のすべてを非表示にすることはできませんか？そして、ボタンをクリックするたびに、すべてを非表示にして次の行を表示します。jqueryのnext（）関数を使用してみてください。 jquery-next（）

ああ、deifwudがより良い説明で私を打ち負かしたように見えます。

于 2012-09-20T15:22:14.970 に答える