Javascript 引导模式和徽章

我的网页中有以下代码行-

HTML:

&时代；
信息
消息01：
同侧唇

消息02：
唇瓣

接近

如何更新标记以表示模式中正确的消息量

例如，当用户关闭或删除模式中的消息时，徽章将从显示编号

2

变为

1

另外，当所有消息都被删除后，是否可以显示文本“不再有消息”。请尝试以下操作：

//Find message number initially, before editing
    $(".badge").text($(".alert").length);     

//when the modal is closed
    $('#messagesModal').on('hidden.bs.modal', function () {    
//Set .badge text equal to the length of the .alert array, i.e the number of messages
    $(".badge").text($(".alert").length);       

//If there are no '.alert' divs, i.e. no messages
    if ($(".alert").length == 0) {      
        $(".badge").text("No messages");
    }
});

这会将所有

.alert

元素（消息）放入一个数组，并查看该数组的长度（即有多少消息）。
然后，它更新

.badge

，以反映该数字

---

正在工作的JSFIDLE:

很好。。。我已经花了一些时间，但你现在应该做的是：

用实际数据填充消息数组

添加一些用于删除消息的实际AJAX

所以

$（函数（）{
var informer=$（“#消息informer a”）；
var refreshBadge=函数（messageCount）{
var badge=告密者。查找（“.badge”）；
如果（messageCount>0）{
如果（！徽章长度）{
告密者。文本（“消息”）；
append（“+messageCount+”）；
}否则{
badge.text（messageCount）；
}
}否则{
告密者。文本（“无消息”）；
}
};
var buildMessage=函数（消息）{
var htmlMessage=“”；
htmlMessage+=“”；
htmlMessage+=“”+message.title+”：”；
htmlMessage+=“”+message.text+“
”；
返回HTML消息；
}
//应该有真实的数据
变量消息=[
{id:“1”，标题：“信息01”，正文：“Lipsum Ipsum”}，
{id:“2”，标题：“电文02”，正文：“Ipsum Lipsum”}；
refreshBadge（消息长度）；
告密者。关于（“点击”，功能（e）{
e、 预防默认值（）；
var modalBody=$（“.modalBody”）；
modalBody.empty（）；
对于（var i=0；i



&时代；
信息
接近
@joe_young Just full answer.@user1752759我更喜欢将标记保留在html中（而不是作为对象属性的值），因为它可以很容易地用作诸如Ractive.js之类的html模板，但仍然会弹出模式。我不认为采用HTML内容是一种好方法。
//Find message number initially, before editing
    $(".badge").text($(".alert").length);     

//when the modal is closed
    $('#messagesModal').on('hidden.bs.modal', function () {    
//Set .badge text equal to the length of the .alert array, i.e the number of messages
    $(".badge").text($(".alert").length);       

//If there are no '.alert' divs, i.e. no messages
    if ($(".alert").length == 0) {      
        $(".badge").text("No messages");
    }
});