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

Question

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

这里的代码有什么问题，它迭代循环中的所有复选框，并选择选中的值添加到文章数据中。

$('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

我认为你需要使用 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);