Проверьте, являются ли элементы dom с идентификатором атрибута данных, а затем обновляют эти атрибуты данных данных.

Question

У меня есть Message SignRR messagingHub, который проверяет, находятся ли пользователи в сети или нет.

Как только я определяю идентификатор и статус подключенных пользователей, мне необходимо обновить любые элементы 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 Dont создать изолированную сферу как функции, так что вы не можете использовать $(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>