CSSでjQuery IDセレクタを使用する

Question

実際にストリーマーを使ってリストを作成し、オンラインになっているかどうかを確認します。そうであれば、緑の背景色になります。

ストリーマーごとにを含む「チームリスト」の横に追加のリストを作成します。

---

これは私が背景色に使用しているのと同じ方法を使用しようとしています。

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

（ストリーマごとに背景色を着色する）

しかし、今、私はちょうどリストとない至る所にストリーマを非表示にします。

だから私は、これを使用することはできません：私はすでに適用しようとした

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

（すべてのリストですべてのオフラインストリーマを隠します）

---

をIDが、実際に私はどのようにわからない。私が使用している場合 この：

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

何も起こりません。

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

を（私はオンライン私のIDを命名）

---

（私はすでに、今何も作品にする、新しいにIDを適用しようとしました）

TL; DR：

オフラインストリーマーを新しいリストで非表示にしたいが、私が使用したのと同じIDセレクターを使用することはできないefore。どうしたらいいですか？

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 = userの要素を呼び出していますが、提供したHTMLのクラスは "header"クラスが追加され、バックグラウンドも変更されます。

Answer 2

私はリンクしたjsfiddleを見て、起こっていることをよりよく理解しています。

サーバーは常に空のストリームを返します。したがって、コードはステートメントの「真の」部分に入ることはありません。さらに、ステートメントの「偽」部分では、コードによって背景色が変更され、表のセルが非表示になります。

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（ユーザー） " "）CSS（" 表示"、 "なし"）。

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