Question

我的网页中有以下几行代码 - example/demo。

HTML：

<p data-toggle="modal" data-target="#messagesModal"><a href="#">Messages <span class="badge">2</span></a>
</p>

<!-- Modal -->
<div class="modal fade" id="messagesModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Messages</h4>
      </div>

      <div class="modal-body">
        <div class="alert fade in">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
          <strong>Message 01</strong>:
          <p>Lipsum Ipsum
          </p>
        </div>

        <div class="alert fade in">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
          <strong>Message 02</strong>:
          <p>Ipsum Lipsum</p>
        </div>
      </div>

      <div class="modal-footer">
        <div class="col-md-8 pull-left">
        </div>

        <div class="col-md-4">
          <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

如何更新徽章以表示模式中正确的邮件数量？

例如，当用户关闭或删除模式中的邮件时，徽章会从显示号码2变为1？

此外，是否可以显示文字＆＃34; 没有更多消息。＆＃34;何时删除了所有邮件？

Answer 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以反映该数字。

使用JSFiddle：http://jsfiddle.net/joe_young/62hbqmtp/

Answer 2

嗯......我已经花了一些时间，但你现在应该做的就是：

使用您的实际数据填充消息数组;
添加一些实际的AJAX以删除邮件。

因此...

$(function() {
    var informer = $("#messageInformer a");
    var refreshBadge = function(messageCount) {
        var badge = informer.find(".badge");
        if (messageCount > 0) {
            if (!badge.length) {
                informer.text("Messages ");
                informer.append("<span class=\"badge\">" + messageCount + "</span>");
            } else {
                badge.text(messageCount);
            }
        } else {
            informer.text("No messages");
        }
    };

    var buildMessage = function(message) {
        var htmlMessage = "<div class=\"alert fade in\">";
        htmlMessage += "<a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-lable=\"close\" data-id=\"" + message.id + "\">&times;</a>";
        htmlMessage += "<strong>" + message.title + "</strong>:";
        htmlMessage += "<p>" + message.text + "</p>";
        return htmlMessage;
    }

    // There should be real data
    var messages = [
        { id: "1", title: "Message 01", text: "Lipsum Ipsum" },
        { id: "2", title: "Message 02", text: "Ipsum Lipsum" }];

    refreshBadge(messages.length);

    informer.on("click", function(e) {
        e.preventDefault();
        var modalBody = $(".modal-body");
        modalBody.empty();
        for (var i = 0; i < messages.length; i++) {
            modalBody.append(buildMessage(messages[i]));
        }
    });

    $("body").delegate(".alert .close", "click", function() {
        var messageId = $(this).data("id");
        // There should be some AJAX possibly
        messages = messages.filter(function(el) {
            return el.id != messageId;
        });
        if (messages.length == 0) {
            $("#messagesModal").modal("hide");
        }
        refreshBadge(messages.length);
    });
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<p data-toggle="modal" data-target="#messagesModal" id="messageInformer"><a href="#">Messages <span class="badge"></span></a>
</p>

<!-- Modal -->
<div class="modal fade" id="messagesModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Messages</h4>
      </div>

      <div class="modal-body">
      </div>

      <div class="modal-footer">
        <div class="col-md-8 pull-left">
        </div>

        <div class="col-md-4">
          <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap模态和徽章

2 个答案: