我正在使用 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>
我正在制作一个网站,显示所有 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>