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

Posted 2023-02-26

【中文标题】如何使用 jQuery 更改 <span> 标签 </span> 之间的值？

【英文标题】：How can I change the value between <span> tag </span> using jQuery?

【发布时间】：2017-05-20 17:31:56

【问题描述】：

我正在开发小型 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 方法，我在其中单击未读消息并将其状态更改为数据库中的“已读”：

<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 方法时，我可以获得这个显示我的号码的整数变量，我可以减少它。

谢谢大家 干杯

【参考方案1】：

我看不出根据是否有未读消息生成的html有什么不同，但这里是我的建议：

为跨度指定一个唯一的 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();