我正在使用 Twitch API 对特定的主播进行分类。代码很长,有没有更短的方法?

I'm using the Twitch API to categorize specific streamers. The code is insanely long, is there a shorter way?

我正在制作一个网站,显示所有 Twitch 上的热门流,并根据流的内容对它们进行分类。因此,如果有人点击英语,它会显示所有热门英语流。顺便说一句,我手动将类别添加到流中。一个例子:目前我检查 1 号流是否是 streamer34,如果是,它适用 class "English"。如果不是,它会检查顶部流是否是其他 33 个流。 这已经是相当多的代码了,示例在这里:

var stream0 = "<? echo $lolarray->streams[0]->channel->name; ?>";

if(stream0 == "Streamer1") {

    $('#stream0').addClass('class2');
    $('#stream0').addClass('class1');
    $('#stream0').addClass('class33');
    $('#stream0').addClass('class99');
}
if(stream0 == "Streamer2") {

    $('#stream0').addClass('class5');
    $('#stream0').addClass('class2');
    $('#stream0').addClass('class81');
    $('#stream0').addClass('class0');
}
if(stream0 == "Streamer3") {

    $('#stream0').addClass('class1');
    $('#stream0').addClass('class444');
    $('#stream0').addClass('class100');
}

$lolarray 指的是 JSON Twitch API 页面。 #stream0 是 div,其中包含顶级流。


但这只会检查顶级流,例如,如果他是第三大观看流,它不会将 class 添加到 streamer3,只有当他是第一流时。所以,我的网站显示了前 60 个流。所以我刚刚展示的代码是 x60...只用 1 - 59 替换所有 0。
这使我的代码达到了将近 15000 行。这感觉很疯狂,几乎不可行。
哦,只是为了获得额外信息,classes 指的是复选框的值。

我希望有一条更短的路,我不知道。

这似乎不起作用(来自一个答案):

var streamers {
    'esl_csgo': [
        'tournament',
        'competition',
        'english'
    ]
};

var setTwitchClass1 function(streamer) {
    var classNames = streamers[streamer];
    for (i=0; i<classNames.length; i++) {
        $('#stream0').addClass(classNames[i]);
    }
};
setTwitchClass1('esl_csgo');

我可能会制作一个字典,为所有主播定义 CSS 类,然后使用循环函数根据该字典添加 类。

var streamers = {
  'Streamer1': [ 2, 1, 33, 99],
  'Streamer2': [ 5, 2, 81, 0],
  'Streamer3': [1, 444, 100]
};

var setTwitchCSS = function(streamer) {
  // streamer is a string representing the current streamer,
  // 'Streamer1', 'Streamer2', or 'Streamer3' in your code

  // This will set classNums to be the array from our dictionary
  // e.g. if streamer = 'Streamer1', classNums = [ 2, 1, 33, 99 ]
  var classNums = streamers[streamer];

  // This loops through the array classNums to grab every number
  // from the array
  for (i=0; i<classNums.length; i++) {

    // For each class number, add the css class
    // 'class' + number from the array
    // e.g. 'class2', 'class1', 'class33', and 'class99'
    $('#stream0').addClass('class' + classNums[i]);
  }
};

// Call the function with the name of the streamer, which
// should match one of the keys from the streamers dictionary
// defined at the beginning
setTwitchCSS('Streamer1');

或者如果您需要使用字符串而不是示例中的 class[num] 模式:

var streamers = {
  'Streamer1': [
    'class2',
    'class1',
    'class33',
    'class99'
  ]
};

var setTwitchClassnames = function(streamer) {
  var classNames = streamers[streamer];
  for (i=0; i<classNames.length; i++) {
    $('#stream0').addClass(classNames[i]);
  }
};

修复了一些错误并添加了评论,因为这次我没有从 phone 编辑。

现场版

var streamers = {
    'esl_csgo': [
        'tournament',
        'competition',
        'english'
    ]
};

var setTwitchClass1 = function(streamer) {
    var classNames = streamers[streamer];
    for (i=0; i<classNames.length; i++) {
        $('#stream0').addClass(classNames[i]);
    }
};

setTwitchClass1('esl_csgo');
#stream0 {
  height: 100px;
  width: 100px;
  padding: 20px;
}

.tournament {
  background-color: pink;
}

.competition {
  font-weight: bold;
}

.english {
  border: solid black 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="stream0">
  Streamer Div
</div>