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

Question

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

这是它的样子：

这里是使它看起来像上图的代码：

<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 添加到一个名为 inboxMessages 的 span 它看起来像这样：

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

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

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

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

谢谢大家干杯

Answer 1

根据是否有未读消息生成的 html 没有任何区别，但我的建议是：

为 span 指定唯一 ID 或 class 值，以便于选择。像这样：

<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> 之间的值？

How can I change the value between <span> tag </span> using jQuery?

javascript

asp.net-mvc

jquery

views