jquery - 设置页面的可重复输入字段

Question

我正在尝试创建一个插件，我想在其中使用设置页面中的可重复输入字段。我在网上找到了许多关于可重复输入字段的示例代码，但仅适用于帖子/页面编辑屏幕。

我的代码在这里: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>

虽然我想做的就是有一个输入字段，旁边有一个+ADD按钮，这将创建另一个输入字段，当我单击“保存更改”时，它会保存所有输入的所有值。

可以找到类似的东西here但当我只想要一个可重复的输入字段时，它似乎太复杂了。

Answer 1

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;
});