2016-08-09 4 views
1

Я на самом деле создаю список со стримерами и проверяю, находятся ли они в сети, если они получат зеленый цвет фона.

Теперь я хочу создать дополнительный список рядом с моим «списком команд», который включает в себя каждые стример.Использовать jQuery ID Selector с CSS


Для этого я пытаюсь использовать тот же метод, что и тот, который я использую для цвета фона.

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

(чтобы цвет каждого цвета фона для стримеров)

Но теперь я хочу, чтобы просто скрыть кос в один списка и не везде.

Так что я не могу использовать это:

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

(скроет каждый форума стример в каждый список)


Я уже пытался применить ID, но на самом деле я не знаю, как это сделать. Если я использую это:

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

ничего не происходит.

(я назвал мой ID онлайн)

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

(я уже пытался применить идентификатор к новому, к и теперь к, но ничего не работает)


TL;

Я хочу скрыть автономные стримеры в новом списке, но я не могу использовать один и тот же идентификатор, как я использовал b Efore. Как мне это сделать?

+0

Можете ли вы разместить дополнительную информацию о структуре HTML (например, как пользователи вложены под '# online')? Скорее всего, вам просто нужно добавить потомка в ваш '$ ('# online')' селектор, чтобы получить эту работу –

+0

, почему вам нужен другой класс для каждого стримера? Во всяком случае, каждый стример должен иметь уникальный идентификатор, а затем вы можете использовать классы '.streamer',' .online', '.offline' и т. Д. Для применения стилей ко всем из них. – Polyov

+0

Можете ли вы разместить свой образец html на https://jsfiddle.net, пожалуйста? – Hackerman

ответ

0

Не так много, чтобы начать с, но если у вас есть структура, как

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

Он работает. строка, содержащая Джон, исчезает

На другом фрагменте кода, где вы пытаетесь изменить цвет фона, вы вызываете элемент с классом = пользователь, но только тот HTML-код, который вы указали, имеет только заголовок класса добавлен класс, меняется и фон.

+0

Эй, я пытаюсь, как вы описали, но он не хочет работать. '$ (" # onlineStreamer ".concat (пользователь)). Css (" display "," none "); ' Любая другая идея, почему она не работает? :/ – Camirlot

+0

"#onlineStreamer" .concat (user) = "#onlineStreamerUser" Убедитесь, что пользователь является второй частью идентификатора, потому что он будет добавлен в предоставленную строку. Кроме того, помните, что идентификатор должен использоваться только одним элементом. если у вас есть несколько элементов с одинаковым ID, jQuery будет вести себя неожиданно или вообще не работать. – Buffalo

0

Я посмотрел на связанную вами 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