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种状态中的每一种，删除之前添加的任何状态类并添加新状态。

这里的问题是如何在jQuery选择器中放置JSON条目的val（uid类已经用逗号分隔）。

Answer 1

您的代码已按您的要求运行。话虽如此，您可以删除$.each()并简单地使用key和val来构建所需的选择器和类名，从而将其干掉，如下所示：

＆＃13;

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);
});

＆＃13;

.status-online {
  color: #0C0;
}

.status-away {
  color: #CCC;
}

.status-offline {
  color: #C00;
}

＆＃13;

<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>

＆＃13;

jQuery对选择器的JSON响应

1 个答案: