如何使用jQuery更新div中的HTML元素

Question

我正在努力尝试在我的项目中修复和实现一个功能。

在我的应用程序中，每个用户都可以通过 AJAX 图像上传数据和相关信息。 每张图片都会添加到图库中，并且有小徽章显示用户在上传表单中应用了哪些数据和信息。

可以使用模态形式更新数据和信息。 在画廊中带有小徽章的每个图像的结果下方：

在 jQuery 脚本动态添加的代码下方。

<p class="badges" data-badges="${data.pictures[i].imgid}">
${(() => {
  if (data.pictures[i].status == '1'){
    return `<span class="badge badge-success statusBadge">Published</span>`
  } else {
    return `<span class="badge badge-warning statusBadge">Hidden</span>`
  }
})()}
${(() => {
    if (data.pictures[i].infos){
        return `<span class="badge badge-info infoBadge">Info</span>`
    }
    return '';
})()}
${(() => {
    if (data.pictures[i].codes || data.pictures[i].date || data.pictures[i].event ||  data.pictures[i].location){
        return `<span class="badge badge-secondary dataBadge">Data</span>`
    }
    return '';
})()}
${(() => {
    if (data.pictures[i].crid){
        return `<span class="badge badge-primary creditBadge">Credit</span>`
    }
    return '';
})()}
</p>

所以，有一个主要的 P 标签，带有一个唯一 id 的类徽章和数据徽章属性

现在...问题：当用户使用模态表单应用新数据/信息时，我想在第一个徽章（在主 p 标签中使用类 statusBadge）之后更新徽章。

我正在尝试使用以下代码删除并重新创建主 p 标签内的徽章……但我无法将第一个状态徽章保留在那里……

let badges = $('.badges[data-badges="' + imgid + '"]');
badges.empty();
$.ajax({
    dataType: 'json',
    type:'GET',
    url: `${controller_url}/get_${category}_badges/${imgid}`,
}).done(function(data){
    if(data.status) {
        $(`   
            ${(() => {
                if (data.badges.info){
                    return `<span class="badge badge-info">Info</span>`
                }
                return '';
            })()}
            ${(() => {
                if (data.badges.data){
                    return `<span class="badge badge-secondary">Data</span>`
                }
                return '';
            })()}
            ${(() => {
                if (data.badges.credit){
                    return `<span class="badge badge-primary">Credit</span>`
                }
                return '';
            })()}
         `).appendTo(badges);   
    }
});

另外，我不确定使用 empty() 而不是 remove() 来摆脱需要更新的徽章是否更好。

抱歉这篇长文章，希望我已经解释了这个问题……而且……不要怪我！ 非常感谢任何提示和帮助

Answer 1

我解开了你的 jQuery 脚本。 我希望你仍然找到自己的路。 前两行是尝试在 SO 上设置类似 Ajax 结构的东西。

 // this is a "pretend PHP-server", returning a JSON string: const blb=da=>URL.createObjectURL(new Blob([JSON.stringify(da)],{type: "text/json"})); let imgid="img1"; // set some context ... the current imgid let badges = $('.badges[data-badges="' + imgid + '"]'); $.ajax({ dataType: 'json', type:'GET', url: blb({status:1,badges:{info:1,data:2,credit:3}}) // `${controller_url}/get_${category}_badges/${imgid}` }).done(function(data){ if(data.status) { badges.empty().append( Object.keys(data.badges).map(b=>`<span class="badge badge-${b}">${b}</span>`).join("") ) } });

 img {border: 2px grey solid} .badges span {padding:10px;margin:6px; width:30px; background-color:#def;border:1px #07f solid}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <img src="https://i.stack.imgur.com/Zw4w0.jpg" > <div class="badges" data-badges="img1"> initial badges ... </div> </div>

我没有在.done()函数中使用单独的函数调用，而是data.badges对象中的所有定义的键，并为每个键创建一个徽章。 显然，我的 CSS 不仅仅是基本的......