Question

嗨朋友我使用foreach并在内部使用$('#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>'); }) })显示html，这是当我执行模态时，这是代码：

{{1}}

问题是当我关闭模型并且我重新打开这个时，数据显示加倍...我检查了我的数组，这不是加倍，如果foreach保存数据，我不知道，请可以你说我的错误是什么？或者我如何解决这个问题？

如果您需要更多数据，请说我，谢谢。

Answer 1

问题是你要反复附加表单而不先清除它。首先清除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>');
 })

}）

Answer 2

将.append替换为.html。要将多个元素添加到模态，您需要首先循环并创建模板＆amp;然后将其添加到模态

您正在使用.append继续添加模板，因此请使用.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 );
}

 )

附加在JQUERY的foreach中

2 个答案: