Question

我正在处理插件，需要加载预设并填写包含此数据的表单。在尝试尽可能简短地编写代码时，我最终创建了一个＆＃34;模板＆＃34;变量如下：

var Fields =  
    '<div class="Container">' +
    '<div class="Fields">' +
    '<input type="text" name="Title" placeholder="Title" />' +
    '<input type="text" name="Address" placeholder="Address" />' +
    '<input type="text" name="Latitude" placeholder="Latitude" />' +
    '<input type="text" name="Longitude" placeholder="Longitude" />' +
    '<input type="text" name="Description" placeholder="Description" />' +
    '<input type="text" name="URL" placeholder="URL" />' +
    '<div class="Image"></div>' +
    '</div>' +
    '</div>';

然后像这样追加：

$('.results').append($(Fields))
         .find('.Title').text(temp[0]).end()
         .find('input[name="Title"]').val(temp[0]).end()
         .find('input[name="Address"]').val(temp[1]).end()
         .find('input[name="Latitude"]').val(temp[2]).end()
         .find('input[name="Longitude"]').val(temp[3]).end()
         .find('input[name="Description"]').val(temp[4]).end()
         .find('input[name="URL"]').val(temp[5]).end()
         .find('.Image')
         .addClass('added-image')
         .append('<img src="' + temp[6] + '" />').end();

我面临的问题是所有数据（图像除外）都是一样的。当我console.log它显示两组数据，但仍然标题等等是相同的。这是我设置预设的全部功能：

function preset() {
        var str = 'Stackoverflow&%1600 Penn&%10.2342342&%2.2532452&%Need help with this&%http://www.stackoverflow.com&%http://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg;Google&%Silicon Valley 1&%80.435234523&%14.0065592&%This is Google&%http://www.google.com&%http://resources.news.com.au/files/2012/01/13/1226243/386315-harp-seal-1.jpg;',
            arr = {},
            temp = {},
            Fields =  
'<div class="Container">' +
'<div class="Fields">' +
'<input type="text" name="Title" placeholder="Title" />' +
'<input type="text" name="Address" placeholder="Address" />' +
'<input type="text" name="Latitude" placeholder="Latitude" />' +
'<input type="text" name="Longitude" placeholder="Longitude" />' +
'<input type="text" name="Description" placeholder="Description" />' +
'<input type="text" name="URL" placeholder="URL" />' +
'<div class="Image"></div>' +
'</div>' +
'</div>';
        arr = str.split(";");
        $.each(arr,function(i,val){
            temp = arr[i].split("&%");
            if(temp.length >= 2) {
                if(temp[6] !== 'undefined') {
                    $('.results').append($(Fields))
                        .find('.Title').text(temp[0]).end()
                        .find('input[name="Title"]').val(temp[0]).end()
                        .find('input[name="Address"]').val(temp[1]).end()
                        .find('input[name="Latitude"]').val(temp[2]).end()
                        .find('input[name="Longitude"]').val(temp[3]).end()
                        .find('input[name="Description"]').val(temp[4]).end()
                        .find('input[name="URL"]').val(temp[5]).end()
                        .find('.Image')
                        .addClass('added-image')
                        .append('<img src="' + temp[6] + '" />').end();
                } else {
                    $('.results').append($(Fields))
                        .find('.Title').text(temp[0]).end()
                        .find('input[name="Title"]').val(temp[0]).end()
                        .find('input[name="Address"]').val(temp[1]).end()
                        .find('input[name="Latitude"]').val(temp[2]).end()
                        .find('input[name="Longitude"]').val(temp[3]).end()
                        .find('input[name="Description"]').val(temp[4]).end()
                        .find('input[name="URL"]').val(temp[5]).end();
                }
            } else {
                $('.results').append(Fields);
            }
        });
    }

我为那些想要近距离看到结果的人创建了一个JSFiddle，并且更容易给我一些指示。 http://jsfiddle.net/p7r2n18k/1/

Answer 1

apppend函数会附加您的字段并返回附加数据的元素，因此它最终会更改所有字段，包括旧字段。从数据更新中分离附加函数：

var fields = $(Fields);
 $('.results').append(fields);
 fields
     .find('.Title').text(temp[0]).end()
     ...

选中此fiddle

为数组中的每个项添加html内容

1 个答案: