javascript - jQuery JSON 对选择器的响应

Question

我从服务器收到如下 JSON 响应:

{"online":".uid-1,.uid-2,.uid-3","away":"","offline":".uid-4,.uid-5"}

这意味着:

• 在线:.uid-1、.uid-2、.uid-3
• 离开:无
• 离线:.uid-4、.uid-5

以及 jQuery 代码:

$.getJSON('users-get-online-status.php', function(data) {
    $.each(data, function(key, val) {
        if (key == 'online') {
            $(val).removeClass('status-online status-away status-offline').addClass('status-online');
        }
        if (key == 'away') {
            $(val).removeClass('status-online status-away status-offline').addClass('status-away');
        }
        if (key == 'offline') {
            $(val).removeClass('status-online status-away status-offline').addClass('status-offline');
        }
    });
 });

和 HTML:

<div class="user uid-1"></div>
<div class="user uid-2"></div>
<div class="user uid-3"></div>
<div class="user uid-4"></div>
<div class="user uid-5"></div>

现在这必须遍历 JSON 数组，并且对于 3 个状态中的每一个，删除任何以前添加的状态类并添加新的。

这里的问题是如何将 JSON 条目的 val(uid 类已经用逗号分隔)放入 jQuery 选择器中。

Answer 1

您的代码已按您的要求运行。话虽如此，您可以通过删除 $.each() 并简单地使用 key 和 val 来构建所需的选择器来使其干燥和类名，像这样:

var data = {
  "online": ".uid-1,.uid-2,.uid-3",
  "away": "",
  "offline": ".uid-4,.uid-5"
}

// in the AJAX handler:
$.each(data, function(key, val) {
  $(val).removeClass('status-online status-away status-offline').addClass('status-' + key);
});

.status-online {
  color: #0C0;
}

.status-away {
  color: #CCC;
}

.status-offline {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="user uid-1">1</div>
<div class="user uid-2">2</div>
<div class="user uid-3">3</div>
<div class="user uid-4">4</div>
<div class="user uid-5">5</div>