将未知元素与未知索引进行匹配

Question

如何使其更易于管理？song元素是由PHP生成的，所以我不知道会有多少。current_song的变量数量也是未知的，但与song元素相同。谢谢

function gid(name)
      {
        return document.getElementById(name);
      };
function itemMonitor(obj)
      {         
        var current_song = jwplayer().getPlaylistItem().index;
        gid('nowplaying').innerHTML = 'Now Playing: <span>' + player.getPlaylist()[obj.index].title + '</span>';
        if (current_song == 0) {
            gid('song0').style.backgroundColor = "#E6E8FA";}
        else if (current_song !== 0) {
            gid('song0').style.backgroundColor = "#ffffff";}
        if (current_song == 1) {
            gid('song1').style.backgroundColor = "#E6E8FA";}
        else if (current_song !== 1) {
            gid('song1').style.backgroundColor = "#ffffff";}    
        if (current_song == 2) {
            gid('song2').style.backgroundColor = "#E6E8FA";}
        else if (current_song !== 2) {
            gid('song2').style.backgroundColor = "#ffffff";}
        if (current_song == 3) {
            gid('song3').style.backgroundColor = "#E6E8FA";}
        else if (current_song !== 3) {
            gid('song3').style.backgroundColor = "#ffffff";}
        if (current_song == 4) {
            gid('song4').style.backgroundColor = "#E6E8FA";}
        else if (current_song !== 4) {
            gid('song4').style.backgroundColor = "#ffffff";}
        if (current_song == 5) {
            gid('song5').style.backgroundColor = "#E6E8FA";}
        else if (current_song !== 5) {
            gid('song5').style.backgroundColor = "#ffffff";}
        if (current_song == 6) {
            gid('song6').style.backgroundColor = "#E6E8FA";}
        else if (current_song !== 6) {
            gid('song6').style.backgroundColor = "#ffffff";}
        if (current_song == 7) {
            gid('song7').style.backgroundColor = "#E6E8FA";}
        else if (current_song !== 7) {
            gid('song7').style.backgroundColor = "#ffffff";}
        if (current_song == 8) {
            gid('song8').style.backgroundColor = "#E6E8FA";}
        else if (current_song !== 8) {
            gid('song8').style.backgroundColor = "#ffffff";}
        if (current_song == 9) {
            gid('song9').style.backgroundColor = "#E6E8FA";}
        else if (current_song !== 9) {
            gid('song9').style.backgroundColor = "#ffffff";}
        if (current_song == 10) {
            gid('song10').style.backgroundColor = "#E6E8FA";}
        else if (current_song !== 10) {
            gid('song10').style.backgroundColor = "#ffffff";}           
      };

Answer 1

使用以下代码。所有歌曲元素都是通过CCD_ 1获得的。然后，循环浏览这个集合，并设置所需的属性：

function gid(name) {
    return document.getElementById(name);
}
function itemMonitor(obj) {         
    var current_song = jwplayer().getPlaylistItem().index;
    var currentPlayListItem = player.getPlaylist()[obj.index];
    if (!currentPlayListItem) {
        // The song does not exist, atm. Do something, e.g. throw an error:
        alert("Song does not exist!");
        return;
    }
    gid('nowplaying').innerHTML = 'Now Playing: <span>' + currentPlayListItem.title + '</span>';
    var all_songs = document.querySelectorAll('[id^="song"]');
    for (var i=0; i<all_songs.length; i++) {
        var song = all_songs[i];
        var songId = /^song(d+)$/.exec(song.id);
        if (songId === null) continue; // Not a song
        else songId = 1*songId[1]; // Match the songId, convert to number
        all_songs[i].style.backgroundColor = current_song === songId ? "#E6E8FA" : "#FFF";
        // Or, replace the previous line with:
        /*if (current_song === songId) {
            all_songs[i].style.backgroundColor = "#E6E8FA";
        } else {
            all_songs[i].style.backgroundColor = "#ffffff";
        }*/
    }
 }

关于编码风格的说明：

• 函数声明（function name(){}）不必用分号后缀。不过这并不违法
• if (a === b) { ... } else if (a !== b){..}可以缩短为if (a === b) {...} else { ... }，因为如果a不等于b，那么它是不相等的