我正在制作一个网站，显示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');
我可能会创建一个字典，定义所有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>