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

Question

I'm making a website that shows all top streams on twitch, and based on what the stream is about it categorizes them. So if someone would click on English, it shows all the top english streams. By the way, i manually add categories to the streams. An example: Currently i check if the number 1 stream is streamer34, if yes, it applies class "English". If not it checks if the top stream is the other 33 streams. This is already quite a lot of code, example here:

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 refers to the JSON Twitch API page. #stream0 is the div that holds the top stream inside it.

But this only checks for the top stream, for example, it won't add the class to streamer3 if he's the third most viewed stream, only if he's first. So, my site shows the top 60 streams. So the code i just showed goes x60... Only replacing all 0's by 1 - 59.
This gets my code to almost 15000 lines.. which feels pretty insane and almost not doable.
Oh just for extra information, the classes refer to value's of checkboxes.

I hope there's a shorter way, i've no idea.

This doesn't seem to work (from an answer):

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

I would probably make a dictionary that defines the CSS classes for all streamers, and then use a looping function to add classes based on that dictionary.

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

Or if you need to use strings instead of the class[num] pattern from your example:

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]);
  }
};

Fixed a couple bugs and added comments, since I'm not editing from my phone this time.

Live Version

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>

</div>