0

私はJQueryにかなり慣れていないので、ボタンをクリックするだけで複数のフォームフィールドを追加しようとしています。既存のフィールドを削除することはできますが、新しいフィールドを追加することはできません。

テスト： http： //jsfiddle.net/Z4kYf/

私のHTMLコードは次のとおりです。

<div class="repeatable-wrap">
    <ul id="tracks-repeatable" class="repeatable-fields-list">
        <li>
            <input type="text" name="fr_options1" value="" size="200" />
            <a class="repeatable-field-remove button" href="#">REMOVE</a>
        </li>
    </ul>
</div>
<a class="repeatable-field-add button" href="#">ADD</a>

そしてJquery：

jQuery(function(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');
        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;
    });
});​

</ p>

4

3 に答える 3

2

repeatable-field-addリンクはrepeatable-wrapdivの外にあるため、呼び出し.closest('div.repeatable-wrap')ても何も見つかりません。

div内に移動すると、正しい軌道に乗ることができます-http://jsfiddle.net/Z4kYf/1/

于 2012-11-23T22:07:15.693 に答える
2

このコードをひよこ...

       jQuery(function(jQuery) {
jQuery('.repeatable-field-add').click(function() { 
var theField = jQuery('div.repeatable-wrap').find('.repeatable-fields-list li:last').clone(true);

  //   console.log(theField);
    var theLocation = jQuery('div.repeatable-wrap').find('.repeatable-fields-list li:last');
    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-23T22:09:00.473 に答える
1

私の見解：

http://jsfiddle.net/hUrZB/

<ul class='list'><li class='repeat'>
    <input type='text' name="options"/>
    <input class='remove' type='button' value="remove"/>
    <li>
</ul>
        <input class='add' type='button' value='add'/>

$(function() {
    var list = $(".list");
    var repeatable = $("li.repeat").clone(true);
    repeatable.on("click", ".remove", function(e) {
        $(this).parent(".repeat").remove()
    });
    var add = $(".add");
    add.click(function(){`enter code here`
        r = $(repeatable).clone(true);
        r.find("[name=options]").attr("value","something");
        list.append(r);
    });
    $(".repeat").remove();
    list.append(repeatable);
});​
于 2012-11-23T22:47:23.337 に答える