如何使用<span>更改<span>标记</span>之间的值？

Question

我正在开发小型ASP.NET MVC应用程序，该应用程序正在为登录用户实现收件箱，如果用户有2条未读消息，就会出现带有字母和数字的图标，该图标显示有多少条消息标记为UnRead。

这就是它的样子：

​

下面的代码使得上面的图像看起来像这样：

<i class="fa fa-envelope-o"></i>
   @if (LoggedInUser != null)
   {
           int unReadMessages = Controller.GetNumberOfUnreadMessages(LoggedInUser.LoggedInUserID);
           if (unReadMessages > 0)
           {
             <span class="badge bg-green">@unReadMessages</span>
           }
           else
           {
              <span class="badge bg-green">@unReadMessages</span>
           }

    }

下面是我在上面的代码中所做的工作：

检查用户是否登录系统：

@if (LoggedInUser != null)

如果是，那么从数据库获得消息(有计数查询，它计算有多少条消息被标记为未读，因为这里只需要数字，以便在用户登录时在那里显示)。

int unReadMessages = Controller.GetNumberOfUnreadMessages(LoggedInUser.LoggedInUserID);

在另一个视图中，我有未读消息列表，当我单击其中任何一个消息时，我希望将这个数目减少一个(类似于unreadMessages--;)。

这是我的javascript方法，在该方法中，我单击未读消息并将其状态更改为数据库"Read"：

<script type="text/javascript">

        function onSelectMessage(el) {
            $.ajax({
                method: "GET",
                url: "Message/MarkMessageAsRead",
                data: { messageID: el.id }
            })
    .done(function (response) {
        $('#email-subject').text(response.subject);
        $('#email-body').text(response.body);
        $('#email-date').text(response.created);
        $('#email-sender').text(response.sender);

        var unread = el.getAttribute('data-unread');
        UpdateMessageStatus(el.id, unread);

    });
        }

到目前为止，我尝试的是下面的代码:我将id添加到一个名为span的inboxMessages中，它如下所示：

<span class="badge bg-green" id="inboxMessages">@unreadMessages</span>

在那之后，我添加了这一行代码，希望它能减少我在那封信上的编号，但不幸的是，我失败了，我在控制台中看到了unReadMessageCounter作为NaN的价值。

var unReadMessageCounter = parseInt($('inboxMessages'))；-unReadMessageCounter；

所以，伙计们，我想知道如何从我的信中得到这个数字(在本例中是：<span class="badge bg-green">之间的2值)，@unreadMessage在这个javascript方法中，所以在一个步骤中，我可以在数据库中更新它，将其标记为read，并且我可以减少显示在字母上的这个数字？因此，当用户调用onSelectMessagejavascript方法时，我可以得到这个整数变量，它显示了我的数字，我可以减少它。

谢谢大家干杯

Answer 1

根据是否存在未读消息，我不认为生成的html有任何不同，但我的建议如下：

给span一个唯一的ID或类值，以便很容易地选择它。就像这样：

<span id="unreadMessageBadge" class="badge bg-green">...</span>

然后，获取内容，解析它们并设置一个新值。就像这样：

var msgCount = $("#unreadMessageBadge").text();

if (msgCount !== "") {
    msgCount = parseInt(msgCount) - 1;
}
if (msgCount > 0) {
    $("#unreadMessageBadge").text(msgCount);
} else {
    $("#unreadMessageBadge").hide();
}