Question

我正在尝试使用javascript进行循环。我想要这个循环做的是循环两个不同的输入（文本框）和循环计数一样多次。

所以我们有两个输入，我试图使用连接+ add +来循环文本框并在每次循环时显示。

如您所见，我在某处失败，因为它没有重复输入或显示连接的数字。

我想要的输出
它应该显示四个输入文本框，前两个应标记为street_1＆amp; m2street_1和接下来的两个street_2＆amp; m2street_2。这些也应该显示＆＃34; 1＆＃34;在前两个标签和＆＃34; 2＆＃34;＆＃34;在第二个两个，以便我们知道它正常工作

非常感谢任何帮助或指示！

＆＃13;

var i; 
var add = i;
for (i = 1; i <= 2; i++) {
    document.write(i); 
            if (i === 10){
            document.write();
    } else {
        document.write("<br />");
    }

}

＆＃13;

<div class="clearfix">
	<label for="street_+Add+">Mailing Address 1 +add+:</label>
	<cfinput type="text" name="street_+Add+" value="">
</div>

<div class="clearfix">
	<label for="m2street_+Add+">Mailing Address 2 +add+:</label>
	<cfinput type="text" name="m2street_+Add+" value="">
</div>

＆＃13;

Answer 1

听起来你想动态添加html，为了做到这一点，你必须在javascript中创建你的HTML并使用jQuery的.append()方法，你需要将你的html添加到你的正文（或您想要追加的任何其他元素）：

        for (i = 1; i <= 2; i++) {
    var myHtml = '<div class="clearfix">'
               + '   <label for="street_' + i + '">Mailing Address 1 ' + i + ':</label>'
               + '   <cfinput type="text" name="street_'+i+'" value="">'
               + '</div>'
               + '<div class="clearfix">'
               + '   <label for="m2street_'+i+'">Mailing Address 2 '+i+':</label>'
               + '   <cfinput type="text" name="m2street_'+i+'" value="">'
               + '</div>'
               + '<br />';
    $('body').append(myHtml);
}

这会给你以下输出：

Mailing Address 1 1:
Mailing Address 2 1:

Mailing Address 1 2:
Mailing Address 2 2:

这是小提琴：http://jsfiddle.net/hw0h6cr3/2/

Answer 2

$(document).ready(function() {
    var count = 5;
    for (var i = 0; i < count; i++) {
        var clone = $('#template').clone(true).attr('id', '');
        clone.find('.street').find('label').attr('for', 'street_' + (i+2));
        clone.find('.street').find('label').find('span').html(i+2);
        clone.find('.street').find('input').attr('name', 'street_' + (i+2));
        clone.find('.street').find('input').val(clone.find('.street').find('input').attr('name'));
        
        clone.find('.streetm2').find('label').attr('for', 'm2street_' + (i+2));
        clone.find('.streetm2').find('label').find('span').html(i+2);
        clone.find('.streetm2').find('input').attr('name', 'm2street_' + (i+2)); clone.find('.streetm2').find('input').val(clone.find('.streetm2').find('input').attr('name'));
        
        $('.addresses').append(clone);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="addresses">
    <div id="template" class="section">
        <div class="clearfix street">
            <label for="street_1">Mailing Address 1 - <span>1</span>:</label>
            <input type="text" name="street_1" value=""/>
        </div>
        <div class="clearfix streetm2">
            <label for="m2street_1">Mailing Address 2 - <span>1</span>:</label>
            <input type="text" name="m2street_1" value=""/>
        </div>
    </div>
</div>

Javascript循环输入文本框与连接（动态）

2 个答案: