Question

我不确定这里的循环有什么问题。当我使用复选框从表中选择数据（使用JSON生成）时，会多次添加所选数据。

这里的代码有什么错误，它迭代循环中的所有复选框，并选择要在articledata中添加的选中值。

$('input[name="articles"]:checked').each(function() {
    var articleJson =  JSON.parse(decodeURIComponent(this.value));
    articlesResult +='<div class="container article-box parent><div class="row article-row"><div class="col-md-7 article data-col"><div class="row"><form class="form-horizontal form-custom"><div class="form-group form-custom"><label class="control-label col-md-4 article-label">News Title:</label><div class="col-md-8 article-data"><a href="#">'+articleJson.newsTitle+'</a></div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Published On:</label><div class="col-md-8 article-data">'+articleJson.PublishDate+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Job Function:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntion+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Tags:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntionGA+','+articleJson.newsJobFuntionGA+','+articleJson.newsJobLevelGA+'</div></div></form></div></div><div class="col-md-3 article img-col"><img src="'+articleJson.newsBannerImage+'" class="img-thumbnail img-responsive img-icon" style="max-width: 280px; max-height: 120px;"></div><div class="col-md-2 article btn-col"><div class="row del-btn"><button class="btn btn-danger btn-sm removeArticle"><span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-xs top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-xs down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div><div class="btn-group leftright-btn"><button class="btn btn-primary btn-xs left-btn"><span class="glyphicon glyphicon-arrow-left"></span></button><button class="btn btn-primary btn-xs right-btn"><span class="glyphicon glyphicon-arrow-right"></span></button></div></div></div></div></div>'
    $('.box').append(articlesResult);
});

Answer 1

试试这个，你将同一组模板一遍又一遍地添加到同一个变量并将其附加到DOM。你只需要在循环后调用一次附加。

$('input[name="articles"]:checked').each(function() {
var articleJson =  JSON.parse(decodeURIComponent(this.value));
articlesResult +='<div class="container article-box parent><div class="row article-row"><div class="col-md-7 article data-col"><div class="row"><form class="form-horizontal form-custom"><div class="form-group form-custom"><label class="control-label col-md-4 article-label">News Title:</label><div class="col-md-8 article-data"><a href="#">'+articleJson.newsTitle+'</a></div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Published On:</label><div class="col-md-8 article-data">'+articleJson.PublishDate+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Job Function:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntion+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Tags:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntionGA+','+articleJson.newsJobFuntionGA+','+articleJson.newsJobLevelGA+'</div></div></form></div></div><div class="col-md-3 article img-col"><img src="'+articleJson.newsBannerImage+'" class="img-thumbnail img-responsive img-icon" style="max-width: 280px; max-height: 120px;"></div><div class="col-md-2 article btn-col"><div class="row del-btn"><button class="btn btn-danger btn-sm removeArticle"><span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-xs top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-xs down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div><div class="btn-group leftright-btn"><button class="btn btn-primary btn-xs left-btn"><span class="glyphicon glyphicon-arrow-left"></span></button><button class="btn btn-primary btn-xs right-btn"><span class="glyphicon glyphicon-arrow-right"></span></button></div></div></div></div></div>'  
});
$('.box').append(articlesResult);

Answer 2

我认为你需要使用html而不是追加。因为追加将每次添加已检查的数据以及当前已经具有您之前选择的数据

$('input[name="articles"]:checked').each(function() {
    var articleJson =  JSON.parse(decodeURIComponent(this.value));
    articlesResult +='<div class="container article-box parent><div class="row article-row"><div class="col-md-7 article data-col"><div class="row"><form class="form-horizontal form-custom"><div class="form-group form-custom"><label class="control-label col-md-4 article-label">News Title:</label><div class="col-md-8 article-data"><a href="#">'+articleJson.newsTitle+'</a></div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Published On:</label><div class="col-md-8 article-data">'+articleJson.PublishDate+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Job Function:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntion+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Tags:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntionGA+','+articleJson.newsJobFuntionGA+','+articleJson.newsJobLevelGA+'</div></div></form></div></div><div class="col-md-3 article img-col"><img src="'+articleJson.newsBannerImage+'" class="img-thumbnail img-responsive img-icon" style="max-width: 280px; max-height: 120px;"></div><div class="col-md-2 article btn-col"><div class="row del-btn"><button class="btn btn-danger btn-sm removeArticle"><span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-xs top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-xs down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div><div class="btn-group leftright-btn"><button class="btn btn-primary btn-xs left-btn"><span class="glyphicon glyphicon-arrow-left"></span></button><button class="btn btn-primary btn-xs right-btn"><span class="glyphicon glyphicon-arrow-right"></span></button></div></div></div></div></div>'
});
$('.box').html(articlesResult);

使用复选框从表中选择时添加两次数据

2 个答案: