Question

当我在输入类型文本中输入值时，我想复制相同的部分。 ID是（#time1）。小于0我想用不同的id再次复制相同的部分。我正在使用jquery ui作为单选按钮。

<div class="address-details">
    <div class="form-row">
        <div class="form-inner-field postcode">
            <label><span>Postcode</span></label>
            <input type="text" value="" class="text-box post-code" id="postcode" placeholder="AB15XY" maxlength="8">
            <button class="addressbutton button button-white" disabled="disabled">Find Address</button>
        </div>
        <!-- <div class="help-message">Please enter your post code</div> -->
        <div class="error-message"><strong>This field is mandatory</strong></div>
    </div>

    <div class="form-row">
        <div class="form-inner-field">
            <label><span>Type of occupancy</span></label>
            <div class="radio radiobutton radioblock occupancy-blk clearfix">
                <input type="radio" id="radio1" class="radioown" name="OwnRental">
                <label for="radio1"><span>Own</span></label>
                <input type="radio" id="radio2" class="radioown" name="OwnRental">
                <label for="radio2"><span>Rent</span></label>
                <input type="radio" id="radio3" class="radioown" name="OwnRental">
                <label for="radio3"><span>Live with parents</span></label>
            </div>
        </div>
        <div class="error-message"><strong><i class="fa fa-info-circle"></i>This field is mandatory</strong></div>
    </div>
    <div class="form-row small-form-row add-text-box how-long-u">
        <div class="form-inner-field clearfix">
            <label><span>Please enter how long you have lived at this address</span></label>
            <div class="small-box">
                <input type="text" value="" class="text-box small-text-box number time-year" placeholder="" maxlength="2" id="time1">
                <label><span>Years</span></label>
            </div>
            <div class="small-box">
                <input type="text" value="" class="text-box number time-month" placeholder="" maxlength="2" id="time2">
                <label><span>Months</span></label>
            </div>
        </div>
        <!--<div class="help-message">Please let us know in years & months, for how long you have lived at this address</div>-->
        <div class="error-message"><strong>This field is mandatory</strong></div>
    </div>                  
</div>

Answer 1

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

    $(document).ready(function () {

        $('#time1').blur(function () {
            var value = parseInt($(this).val(), 10);

            if (value < 0) {
                var $szAddress = $('.address-details').clone();

                $($szAddress).find('[id]').each(function () {
                    $(this).attr('id', $(this).attr('id')+'_' + $('.address-details').length)
                    if ($(this).attr('type') == 'radio')
                    {
                        $(this).attr('name', 'OwnRental_' + $('.address-details').length)
                        $(this).next('label').attr('for', $(this).attr('id'))
                    }

                });
                $('.address-details').append($szAddress)
            }
        });
    });
</script>
</head>

<body>

   <div class="address-details">
    <div class="form-row">
        <div class="form-inner-field postcode">
            <label><span>Postcode</span></label>
            <input type="text" value="" class="text-box post-code" id="postcode" placeholder="AB15XY" maxlength="8">
            <button class="addressbutton button button-white" disabled="disabled">Find Address</button>
        </div>
        <!-- <div class="help-message">Please enter your post code</div> -->
        <div class="error-message"><strong>This field is mandatory</strong></div>
    </div>

    <div class="form-row">
        <div class="form-inner-field">
            <label><span>Type of occupancy</span></label>
            <div class="radio radiobutton radioblock occupancy-blk clearfix">
                <input type="radio" id="radio1" class="radioown" name="OwnRental">
                <label for="radio1"><span>Own</span></label>
                <input type="radio" id="radio2" class="radioown" name="OwnRental">
                <label for="radio2"><span>Rent</span></label>
                <input type="radio" id="radio3" class="radioown" name="OwnRental">
                <label for="radio3"><span>Live with parents</span></label>
            </div>
        </div>
        <div class="error-message"><strong><i class="fa fa-info-circle"></i>This field is mandatory</strong></div>
    </div>
    <div class="form-row small-form-row add-text-box how-long-u">
        <div class="form-inner-field clearfix">
            <label><span>Please enter how long you have lived at this address</span></label>
            <div class="small-box">
                <input type="text" value="" class="text-box small-text-box number time-year" placeholder="" maxlength="2" id="time1">
                <label><span>Years</span></label>
            </div>
            <div class="small-box">
                <input type="text" value="" class="text-box number time-month" placeholder="" maxlength="2" id="time2">
                <label><span>Months</span></label>
            </div>
        </div>
        <!--<div class="help-message">Please let us know in years & months, for how long you have lived at this address</div>-->
        <div class="error-message"><strong>This field is mandatory</strong></div>
    </div>                  
</div>
</body>

</html>

如何使用不同的id动态追加div

1 个答案: