Javascript 将jQuery ID选择器与CSS一起使用 实际上，我正在创建一个带有拖缆的列表，并检查它们是否在线，如果在线，它们将得到一个绿色的背景色。

现在，我想在我的“团队列表”旁边创建一个附加列表，其中包括每个拖缆

---

对于这一点，我尝试使用相同的方法，就像我使用的背景色一样

$(".".concat(user)).css("background-color","lightgrey");

（为拖缆的每个背景色上色）

但现在我只想将拖缆隐藏在one列表中，而不是所有位置。

所以我不能用这个：

$(".".concat(user)).css("display", "none");

（将在每个列表中隐藏每个脱机拖缆）

---

我已经试过申请身份证了，但实际上我不知道怎么申请。 如果我使用这个：

$("#online".concat(user)).css("display", "none");

什么也没发生

（我将我的ID命名为在线）

（我已经尝试将id应用于新的，应用于，现在应用于，但没有任何效果）

---

TL；博士：

---

我想在新列表中隐藏脱机拖缆，但不能使用与以前相同的ID选择器。我该怎么做呢？

一开始没什么，但是如果你有一个像

    <table>
        <tr class="header Peter" id ="onlinePeter">
            <td>Peter</td>
        </tr>
        <tr class="header John" id ="onlineJohn">
            <td>John</td>
        </tr>
        <tr class="header Michael" id ="onlineMichael">
            <td>Michael</td>
        </tr>
        <tr class="header Bob" id ="onlineBob">
            <td>Bob</td>
        </tr>
        <tr class="header Daniel" id ="onlineDaniel">
            <td>Daniel</td>
        </tr>
    </table>

它起作用了。包含John的行消失了

---

在另一段代码中，您尝试更改背景颜色，您调用的是class=user的元素，但是您提供的HTML只有类“header”，一旦添加了类，背景也会随之更改。

开始时没有太多，但是如果您有类似

    <table>
        <tr class="header Peter" id ="onlinePeter">
            <td>Peter</td>
        </tr>
        <tr class="header John" id ="onlineJohn">
            <td>John</td>
        </tr>
        <tr class="header Michael" id ="onlineMichael">
            <td>Michael</td>
        </tr>
        <tr class="header Bob" id ="onlineBob">
            <td>Bob</td>
        </tr>
        <tr class="header Daniel" id ="onlineDaniel">
            <td>Daniel</td>
        </tr>
    </table>

它起作用了。包含John的行消失了

---

在另一段代码中，您试图更改背景颜色，您调用的是class=user的元素，但是您提供的HTML只有类“header”，一旦添加了类，背景也会更改。

我查看了您链接的JSFIDLE，更好地了解了正在发生的事情

服务器始终返回一个空流，因此代码永远不会进入语句的“true”部分。此外，在语句的“false”部分，代码更改背景颜色，然后隐藏表格单元格

 function colorize(user){
     $.getJSON('https://api.twitch.tv/kraken/streams/'+user, function(channel) {
         /*
         * Stream always returns as null
         */

         console.log(channel["stream"]); // returns null in all tests
         var data = channel["stream"]; // data == null
         var boolAnswer = ((typeof(data) !== 'undefined') && (data !== null));
         console.log(data);
         if ( boolAnswer === true) {
             $( ".".concat(user) ).css("background-color", "lightgreen");
             /*
             * boolAnswer is always null, so this piece is skipped all the time
             */
         }
         else if ( boolAnswer === false){
             /*
             * First it changes the color and then it hides it
             */
             $(".".concat(user)).css("background-color","lightgrey");
             $(".".concat(user)).css("display", "none");

         }
     }).success(function(response){
         console.log(response);
     });
 }

colorize('jankos'); //hides the cell of jankos
colorize(); // doesn't do anything

如果你评论那句话 $（“.concat（user））.css（“显示”、“无”）

---

我查看了您链接的JSFIDLE，对正在发生的事情有了更好的理解

服务器始终返回一个空流，因此代码永远不会进入语句的“true”部分。此外，在语句的“false”部分，代码更改背景颜色，然后隐藏表格单元格

 function colorize(user){
     $.getJSON('https://api.twitch.tv/kraken/streams/'+user, function(channel) {
         /*
         * Stream always returns as null
         */

         console.log(channel["stream"]); // returns null in all tests
         var data = channel["stream"]; // data == null
         var boolAnswer = ((typeof(data) !== 'undefined') && (data !== null));
         console.log(data);
         if ( boolAnswer === true) {
             $( ".".concat(user) ).css("background-color", "lightgreen");
             /*
             * boolAnswer is always null, so this piece is skipped all the time
             */
         }
         else if ( boolAnswer === false){
             /*
             * First it changes the color and then it hides it
             */
             $(".".concat(user)).css("background-color","lightgrey");
             $(".".concat(user)).css("display", "none");

         }
     }).success(function(response){
         console.log(response);
     });
 }

colorize('jankos'); //hides the cell of jankos
colorize(); // doesn't do anything

如果你评论那句话 $（“.concat（user））.css（“显示”、“无”）

---

你能发布更多的HTML结构（比如用户如何嵌套在

#online

下）吗？很可能您只需要向

$（“#online”）

选择器添加一个子代即可实现此功能为什么每个拖缆都需要不同的类？如果有的话，每个拖缆都应该有一个唯一的ID，然后您可以拥有一个类

.streamer

，

.online

，

.offline

，等等，以便将样式应用于所有拖缆。您可以将示例html发布在上面吗？@RobM。嘿，Rob，实际上这是一个普通的表，但我会包括一个[jsfiddle]（）。就像我已经说过的，我想给它们上色，但也要为每个拖缆添加一个额外的列表，其中只显示在线拖缆！：）@卡米洛特我只是被你的命名方案弄糊涂了。每个拖缆的名称都是列表中的一个元素，对吗？因此每个元素都应该有一个id，即名称。然后根据用户的状态应用类。这里您使用类作为ID，但也使用ID作为ID？你为自己制定的惯例似乎太复杂了，这就是你被绊倒的原因。你能发布更多的HTML结构（比如用户如何嵌套在

#online

下）吗？很可能您只需要向

$（“#online”）

选择器添加一个子代即可实现此功能为什么每个拖缆都需要不同的类？如果有的话，每个拖缆都应该有一个唯一的ID，然后您可以拥有一个类

.streamer

，

.online

，

.offline

，等等，以便将样式应用于所有拖缆。您可以将示例html发布在上面吗？@RobM。嘿，Rob，实际上这是一个普通的表，但我会包括一个[jsfiddle]（）。就像我已经说过的，我想给它们上色，但也要为每个拖缆添加一个额外的列表，其中只显示在线拖缆！：）@卡米洛特我只是被你的命名方案弄糊涂了。每个拖缆的名称都是列表中的一个元素，对吗？因此每个元素都应该有一个id，即名称。然后根据用户的状态应用类。这里您使用类作为ID，但也使用ID作为ID？看来你为自己制定的惯例太复杂了，这就是你被绊倒的原因。嘿，我正试着像你描述的那样，但它不想起作用<代码>$（“#onlineStreamer”.concat（用户））.css（“显示”、“无”）还有其他想法说明它为什么不起作用吗/“#onlineStreamer”.concat（用户）=“#onlineStreamer”确保用户是ID的第二部分，因为它将添加到提供的字符串中。另外，请记住，ID应该只由一个元素使用。如果有多个元素具有相同的ID，jQuery将异常运行或根本无法工作<代码>$（“#onlineStreamer”.concat（用户））.css（“显示”、“无”）还有其他想法说明它为什么不起作用吗/“#onlineStreamer”.concat（用户）=“#onlineStreamer”确保用户是ID的第二部分，因为它将添加到提供的字符串中。另外，请记住，ID应该只由一个元素使用。如果有多个元素具有相同的ID，jQuery将异常运行或根本不工作。

colorize('jankos'); //changes the color of the cell of jankos  
colorize() // still doesn't do anything