我正在使用 Twitch API 对特定流媒体进行分类。代码太长了，有没有更短的方法？

Question

我正在制作一个网站，显示twitch上的所有顶级流，并根据流的内容对它们进行分类。所以如果有人点击英语，它会显示所有的顶级英语流。顺便说一下，我手动添加类别到流。例如:目前我检查1号流是否为streamer34，如果是，则应用类"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，其中包含了顶部流。

但这只检查顶部流，例如，它不会添加类到streamer3，如果他是第三个最受欢迎的流，只有当他是第一。我的网站显示了前60个播放量。所以我刚刚展示的代码是x60…仅用1 - 59替换所有0。
这使我的代码几乎达到15000行。这感觉很疯狂，几乎不可行。
哦，只是为了提供额外的信息，这些类引用了复选框的值。

我希望有更短的路，我不知道。

这似乎不工作(从一个答案):

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

Answer 1

我可能会创建一个字典，定义所有streamer的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]);
  }
};

修正了几个错误并添加了注释，因为我这次不是从我的手机编辑。

<<p> 生活版本/strong>

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>