0

这更像是一个 CSS 问题而不是一个 JQuery 问题，但它包括两者。

我正在尝试向表单添加一个可重复的字段......到目前为止，除了我的 CSS 之外，一切都很好......

可重复字段的 HTML：

    <a class="repeatable-add top-link tooltip-link" href="#" rel="tooltip" data-placement="top" data-original-title="Add a new Address Field">
        <i class="icon-plus-sign"></i>
    </a>
    <div class="controls" id="GMAddresses">
        <ul id="GMAddress-repeatable" class="custom_repeatable" style="list-style:none;margin-left:0;">
            <li>
                <div class="input-prepend input-append" style="margin-left:1%;margin-top:2%;">
                    <span class="add-on"><i class="icon-home"></i> <a class="repeatable-up" href="#"><i class="icon-arrow-up"></i></a></span>
                    <input type="text" name="GMAddress[0]" style="width:85%;" placeholder="Address Here" required>
                    <span class="add-on"><a class="repeatable-down" href="#"><i class="icon-arrow-down"></i></a> <a class="repeatable-remove" href="#"><i class="icon-minus-sign"></i></a></span>
                </div>
            </li>
        </ul>
    </div>

可重复添加按钮的 JQuery：

    //Repeatable Add Button
    $('.repeatable-add').click(function() {
        //Check if there is any open address fields
        var e_error = new Boolean;
        e_error = false;
        $('ul.custom_repeatable').each(function() {
            $(this).find('li').each(function() {
                var mytext = "";
                mytext = $(this).find('input[type=text]').val();
                if(mytext === "") {
                    e_error = true;
                    return false;
                }
            });
        });
        //Check if the max (7) number of addresses has been reached
        if($('ul.custom_repeatable li').length < 7) {
            if(e_error === false) {
                //Add the extra field if there are no errors
                field = $(this).closest('div').find('.custom_repeatable li:last').clone(true);
                fieldLocation = $(this).closest('div').find('.custom_repeatable li:last');
                $('input', field).val('').attr('name', function(index, name) {
                    return name.replace(/(\d+)/, function(fullMatch, n) {
                        return Number(n) + 1;
                    });
                })
                field.insertAfter(fieldLocation, $(this).closest('div')).hide().show('slow');
                $('ul.custom_repeatable li:last input').focus();
                return false;
            } else {
                //Show popup if there was an open address field
                $('#extra_address_error2').popover('show');
                setTimeout(function() {
                    $('#extra_address_error2').popover('hide');
                }, 5000);
                $('ul.custom_repeatable li:last input').focus();
            }
        } else {
            //Show popup if max (7) number of addresses has been reached
            $('#extra_address_error1').popover('show');
            setTimeout(function() {
                $('#extra_address_error1').popover('hide');
            }, 5000);
        }
    });

好的，除了可重复的向上和向下按钮外，这工作正常......这些按钮允许用户根据需要向上和向下移动字段但是向上按钮不应显示在第一个字段上，并且不应显示向下按钮在最后一个领域...

这是我使用的 CSS：

    ul.custom_repeatable > li:first-child .repeatable-up {
        visibility: hidden;
        clear:both;
    }
    ul.custom_repeatable > li:last-child .repeatable-down {
        visibility: hidden;
        clear:both;
    }

CSS工作正常，直到我通过添加按钮添加一个新字段......然后可重复向下按钮不会显示在新字段上......

如果我使用 JQuery 刷新/重新排序字段，则 CSS 适用于两个按钮...

请帮忙...

谢谢！

4

0 回答 0