0

所以我正在编写一些 jQuery 代码来获取页面上显示的新电话数据。

到目前为止，一切正常，除了最后一个电话号码是唯一要显示的电话号码，无论我有多少电话号码。我发现这是因为 my$('.new_option').append(inputphone);覆盖了最后一个。

这是 jsFiddle（不完全相同的代码，因为我没有数据库对象，但会产生相同的问题）：http: //jsfiddle.net/leongaban/dvYMb/

变量（带有标签的 HTML + 输入）：

var inputphone = $("<li><label></label><br/><input type='tel' pattern='[0-9]{10}' class='added_phone' name='' value='' autocomplete='off' maxlength='20' /></li>");

HTML DOM：

<li>
    <ul class="new_option">
    </ul>
</li>

每个循环：

$(profileData.phones).each(function(i) {
    console.log(' ');
    console.log('Phones: '+i);
    console.log(profileData.phones[i].label);
    $('.new_option').append(inputphone); //<-- The Issue
    $('.added_phone').parent().find('label').text(profileData.phones[i].tag);
    $('.added_phone').attr('id', "added_"+profileData.phones[i].tag+"phone" + i);
    $('.added_phone').attr('value', profileData.phones[i].label);
});

安慰：
在此处输入图像描述

页面结果：
在此处输入图像描述

我的问题是如何使这条线动态生成具有唯一 ID 的新字段？

$('.new_option').append(inputphone);

在这里搜索，我看到人们说使用一个对象，但这种方法还没有成功。

你会怎么处理这个？

4

2 回答 2

1

来自CSS-Tricks Javascript 表单帖子的论坛海报的回答

CodePen http://codepen.io/ggilmore/pen/f3a88dd68a7b1d101712b75318925198

var inputphone = "<label></label><br/><input type='tel' pattern='[0-9]{10}' class='added_phone' name='' value='' autocomplete='off' maxlength='20' />";

var profileData = "Text for input";
var currentListItem;

for (var i = 0, max = 2; i < max; i++) {
    $('.new_option').append('<li class="input-'+i+'" />');

    currentListItem = $('.input-'+i);
    currentListItem
        .append(inputphone)
        .find('label').text(profileData)

    currentListItem
        .find('.added_phone').attr('id', "added_phone" + i).attr('value', profileData);
}

另请注意：这适用于我在 jsFiddle 和 CodePen 中创建的简单基本示例，但是在进一步开发时，它仍然会导致我的 phoneData 对象出现相同的问题。

所以走不同的路线。让电话号码通过 Python 显示（我应该首先这样做，但是我的前端开发人员喜欢 jQuery）我希望这对某人有所帮助！

于 2013-08-27T18:30:00.580 回答
0

这个问题是因为你填满了 ul 并且之后没有重置它。

这是您需要做的：

$(profileData.phones).each(function(i) {
    console.log(' ');
    console.log('Phones: '+i);
    console.log(profileData.phones[i].label);
    $('.new_option').append(inputphone);
    // Reset the ul now and add a new empty ul
    $('.new_option').attr('class', 'ul_added');
    var p = $('.added_phone').parent().parent(); // This is the li above the ul
    p.append('<ul class="new_option"></ul>');
    // Set the values
    $('.added_phone').parent().find('label').text(profileData.phones[i].tag);
    $('.added_phone').attr('id', "added_"+profileData.phones[i].tag+"phone" + i);
    $('.added_phone').attr('value', profileData.phones[i].label);
});
于 2013-08-27T15:12:49.240 回答