Question

我有一个SignalR messagingHub，用于检查用户是否在线。

一旦我识别出连接用户的ID和状态，我就需要更新任何包含带有用户ID的数据属性的dom元素并更新其状态。

基本上，我需要在网站上显示每个dom元素的不同类，以显示哪个用户在线，哪个不在。

这是我最初的尝试：

chatMessagingHub.on('updateUserOnlineStatus', function (userId, isOnline) {

   var status = (isOnline) ? 'online' : 'offline';

   console.log('userid: ' + userId + ' status: ' + status);

   // Check the user id matches any dom elements with a data-attr userid
   if($('[data-userId]') == userId) {

      // Update the selected dom elements data-status attributes
      $(this).attr('[data-status]', isOnline);

      // Detect the change and update the class of the dom element
      $(this).on('change', function() {

         // Check the value of the data-status parameter to add class
         if($(this).attr('data-status') == 'offline') {

            $(this).removeClass('online');

         } else {

            $(this).addClass('online');

         }
      });
   }
});

Answer 1

我无法弄清楚你为什么要使用更改事件，无论如何都要删除第一个if并使用像示例一样的选择器。 IF不会像函数一样创建一个孤立的范围，因此您无法使用$(this)作为选定的dom元素

$(function() {
  var isOnline = true;
  var userid = 1;
  var status = (isOnline) ? 'online' : 'offline';
  var elem = $("[data-userid=" + userid + "]");
  elem.attr("data-status", isOnline);
  if (status === "offline")
    elem.removeClass("online")
  else
    elem.addClass("online");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-userid="1">hello!</span>
<span data-userid="2">hello!</span>
<span data-userid="1">hello!</span>
<span data-userid="4">hello!</span>

检查具有数据属性id的dom元素是否更新了这些元素数据属性

1 个答案: