Question

如何让这个更易于管理？歌曲元素是由PHP生成的，所以我不知道会有多少。 current_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

使用以下代码。所有歌曲元素都是通过document.querySelectorAll('[id^="song"]')获得的。然后，循环遍历此集合，并设置所需的属性：

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，那么它就是不相等的。

匹配未知索引的未知元素

1 个答案: