对选择器的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种状态中的每一种，删除以前添加的任何status类并添加新的状态。

这里的问题是如何将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>

​