将 jQuery ID 选择器与 CSS 一起使用

Question

我实际上是在创建一个主播列表，并检查他们是否在线，如果在线，他们将获得绿色背景色。

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

为此，我尝试使用与背景颜色相同的方法。

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

（为彩带的每个背景颜色着色）

但现在我只想将主播隐藏在一个列表中，而不是所有地方。

所以我不能用这个:

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

（将隐藏每个离线主播在每个列表中）

我已经尝试申请ID，但实际上我不知道如何申请。如果我使用这个：

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

没有任何反应。

(我在网上取了ID)

<tr class="header" id ="online">

（我已经尝试将 id 应用到新的、 the 和现在应用到 the 但没有任何效果）

长话短说：

我想在新列表中隐藏离线主播，但我无法使用与之前相同的 ID 选择器。我该怎么做？

Answer 1

没有太多的开始，但如果你有这样的结构

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

和类似

的脚本

var user = "John";
$("#online".concat(user)).css("display", "none");
user = "Daniel"
$(".".concat(user)).css("background","lightgrey");

有效。包含 John 的行消失了

在您尝试更改背景颜色的另一段代码中，您正在调用带有 class = 用户的元素，但您提供的 HTML 只有 class "header"，添加class后，背景也会发生变化。

Answer 2

我查看了您链接的 jsfiddle，对发生的事情有了更好的了解。

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

 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("display", "none");

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

将 jQuery ID 选择器与 CSS 一起使用

Use jQuery ID Selector with CSS

javascript

jquery

html-table

list

twitch

我实际上是在创建一个主播列表，并检查他们是否在线，如果在线，他们将获得绿色背景色。

长话短说：