代码之家 › 专栏 › 技术社区 › Hernan HumaÃ±a

在JQUERY中的foreach内追加

append foreach jquery

Hernan HumaÃ±a · 技术社区 · 6 年前

嗨,朋友们,我使用foreach,在里面我用html显示 .append ,这是我执行模式时的代码:

    $('#modalEditProducts').on('show.bs.modal', () => {
    arrayProducts.forEach((q) =>{
        $('#modalHERE')
        .append('<div style="width: 100%; text-align: center;">'+
                  '<img src="'+q.photo+'" width="40%">'+
                '</div>'+
                '<div style="width: 70%;">'+
                 '<form>'+  
                    '<div class="form-group">'+
                      '<label for="recipient-name" class="col-form-label">valor 1:</label>'+
                      '<input type="text" class="form-control" value="valor1" id="recipient-name">'+
                    '</div>'+
                    '<div class="form-group">'+
                      '<label for="recipient-name" class="col-form-label">valor 2:</label>'+
                      '<input type="text" class="form-control" value="valor2" id="recipient-name">'+
                    '</div>'+
                    '<div class="form-group">'+
                    '<label for="recipient-name" class="col-form-label">valor 3:</label>'+
                    '<input type="text" class="form-control" value="valor3" id="recipient-name">'+
                  '</div>'+
                 '</form>'+
                '</div>');
     })
})

问题是,当我关闭模型并重新打开它时,数据会加倍显示。。。我检查了我的数组,这不是双倍的,如果foreach保存数据,我不知道,请告诉我我的错误是什么?或者我如何解决这个问题?

如果你需要更多的数据,请告诉我,谢谢。

2 回复 | 直到 6 年前

Cesar Bielich 6 年前

问题是您在一次又一次地追加表单,而没有首先清除它。首先清除html,然后重新加载循环

$('#modalEditProducts').on('show.bs.modal', () => {
$('#modalHERE').html('');
arrayProducts.forEach((q) =>{
    $('#modalHERE')
    .append('<div style="width: 100%; text-align: center;">'+
              '<img src="'+q.photo+'" width="40%">'+
            '</div>'+
            '<div style="width: 70%;">'+
             '<form>'+  
                '<div class="form-group">'+
                  '<label for="recipient-name" class="col-form-label">valor 1:</label>'+
                  '<input type="text" class="form-control" value="valor1" id="recipient-name">'+
                '</div>'+
                '<div class="form-group">'+
                  '<label for="recipient-name" class="col-form-label">valor 2:</label>'+
                  '<input type="text" class="form-control" value="valor2" id="recipient-name">'+
                '</div>'+
                '<div class="form-group">'+
                '<label for="recipient-name" class="col-form-label">valor 3:</label>'+
                '<input type="text" class="form-control" value="valor3" id="recipient-name">'+
              '</div>'+
             '</form>'+
            '</div>');
 })

})

vinayakj 6 年前

代替 .append 具有 .html 。要向modal添加多个元素,需要先循环并创建模板(&M);然后将其添加到modal

您正在使用 。追加 它会不断附加模板,因此请使用 。html 用新模板替换现有模板的API。

$('#modalEditProducts').on('show.bs.modal', () => {
    var template = "";
    arrayProducts.forEach((q) =>{
    template +='<div style="width: 100%; text-align: center;">'+
                  '<img src="'+q.photo+'" width="40%">'+
                '</div>'+
                '<div style="width: 70%;">'+
                 '<form>'+  
                    '<div class="form-group">'+
                      '<label for="recipient-name" class="col-form-label">valor 1:</label>'+
                      '<input type="text" class="form-control" value="valor1" id="recipient-name">'+
                    '</div>'+
                    '<div class="form-group">'+
                      '<label for="recipient-name" class="col-form-label">valor 2:</label>'+
                      '<input type="text" class="form-control" value="valor2" id="recipient-name">'+
                    '</div>'+
                    '<div class="form-group">'+
                    '<label for="recipient-name" class="col-form-label">valor 3:</label>'+
                    '<input type="text" class="form-control" value="valor3" id="recipient-name">'+
                  '</div>'+
                 '</form>'+
                '</div>';

     })
     $('#modalHERE')
        .html(template );
}

 )