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的{{1}} 它看起来像这样：

inboxMessages

之后我添加了这行代码，希望能减少我在该字母上的编号，但不幸的是我失败了，我在控制台中看到我的unReadMessageCounter值为NaN

var unReadMessageCounter = parseInt（$（'inboxMessages'））; --unReadMessageCounter;

所以，我想知道如何从我的信中得到这个数字（在本例中我的情况是：<span class="badge bg-green" id="inboxMessages">@unreadMessages</span>之间的值为2），这个javascript方法中的@unreadMessages所以在一步中我可以更新它在数据库上标记为已读，我可以减少这个字母上显示的数字？所以当用户调用<span class="badge bg-green"> javascript方法时，我可以得到显示我的数字的整数变量，我可以减少它。

谢谢你们干杯

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();
}

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

1 个答案: