2

設定ページで繰り返し可能な入力フィールドを使用したいプラグインを作成しようとしています。繰り返し可能な入力フィールドに関してオンラインで多くのサンプルコードを見つけましたが、投稿/ページ編集画面のみです。

私のコードはここにあります：http：//pastebin.com/fiktsMrS

ご覧のとおり、私は「静的」入力フィールドを使用しています

<!-- Textbox Control -->
<tr><th scope="row">Track 1</th><td><input type="text" size="200" name="fr_options[txt_1]" value="<?php echo $options['txt_1']; ?>" /></td></tr>
<tr><th scope="row">Track 2</th><td><input type="text" size="200" name="fr_options[txt_2]" value="<?php echo $options['txt_2']; ?>" /></td></tr>
<tr><th scope="row">Track 3</th><td><input type="text" size="200" name="fr_options[txt_3]" value="<?php echo $options['txt_3']; ?>" /></td></tr>
<tr><th scope="row">Track 4</th><td><input type="text" size="200" name="fr_options[txt_4]" value="<?php echo $options['txt_4']; ?>" /></td></tr>
<tr><th scope="row">Track 5</th><td><input type="text" size="200" name="fr_options[txt_5]" value="<?php echo $options['txt_5']; ?>" /></td></tr>

私がやりたいのは、1つの入力フィールドと、その横にある+ ADDボタンで、別の入力フィールドを作成することです。[変更の保存]をクリックすると、すべての入力のすべての値が保存されます。

似たようなものがここにありますが、繰り返し可能な入力フィールドが1つしかない場合は、複雑すぎるようです。

4

1 に答える 1

5

PHP

$output = '<div class="repeatable-wrap">' .
    '<ul id="tracks-repeatable" class="repeatable-fields-list">';
if ( ! empty( $options ) ) {
    $i = 1;
    foreach( $options as $option ) {
        $output .= '<li>' .
            '<input type="text" name="fr_options[txt_'.$i.']"' .
                'value="' . $options['txt_'.$i] .'" size="200" />' .
            '<a class="repeatable-field-remove button" href="#">REMOVE</a>' .
            '</li>';
        $i++;
    }
} else {
    $output .= '<li>' .
        '<input type="text" name="fr_options[txt_1]" value="" size="200" />' .
        '<a class="repeatable-field-remove button" href="#">REMOVE</a>' .
        '</li>';
}
$output .= '</ul></div>' .
    '<a class="repeatable-field-add button" href="#">ADD</a>';
echo $output;

配列にフィールド以外のものが含まれている場合$optionsは、上記のループに別の方法で取り組む必要があります。残りはまだ適用されます。

jQuery

jQuery('.repeatable-field-add').click(function() {
    var theField = jQuery(this).closest('div.repeatable-wrap')
        .find('.repeatable-fields-list li:last').clone(true);
    var theLocation = jQuery(this).closest('div.repeatable-wrap')
        .find('.repeatable-fields-list li:last');
    /* the 2 linebreaks before the .find methods
        are for presentation reasons here only */
    jQuery('input', theField).val('').attr('name', function(index, name) {
        return name.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    });
    theField.insertAfter(theLocation, jQuery(this).closest('div.repeatable-wrap'));
    var fieldsCount = jQuery('.repeatable-field-remove').length;
    if( fieldsCount > 1 ) {
        jQuery('.repeatable-field-remove').css('display','inline');
    }
    return false;
});

jQuery('.repeatable-field-remove').click(function(){
    jQuery(this).parent().remove();
    var fieldsCount = jQuery('.repeatable-field-remove').length;
    if( fieldsCount == 1 ) {
        jQuery('.repeatable-field-remove').css('display','none');
    }
    return false;
});
于 2012-11-23T03:08:15.510 に答える