Question

我目前正在从事音乐播放器项目。每首歌曲都有一个单独的歌曲行，带有播放/暂停图标（可播放/暂停歌曲），歌曲名称等。播放器底部是一个播放器播放/暂停栏，可以控制歌曲。

我的问题是，当我通过底部播放一首歌时，播放器栏图标会适当切换，但歌曲行图标不会。

我有一个动态创建歌曲行的JavaScript函数。

var createSongRow = function(songNumber, songName, songLength) {
    var template =
    '<tr class="album-view-song-item">'
    + '   <td class="song-item-number" data-song-number="' + songNumber + '">' + songNumber + '</td>'
    + '   <td class="song-item-title">' + songName + '</td>'
    + '   <td class="song-item-duration">' + filterTimeCode(songLength) + '</td>'
   + '</tr>';

    var $row = $(template);
}

在同一个函数中，我创建了一个clickhandler函数，用于设置当前播放的歌曲并更新播放器行图标。

var clickHandler = function () {

  var songNumber = parseInt($(this).attr('data-song-number'));

  if (currentlyPlayingSongNumber !== null) {
      // Revert to song number for currently playing song because user started playing next song.
      var currentlyPlayingCell = getSongNumberCell(currentlyPlayingSongNumber);
      currentlyPlayingCell.html(currentlyPlayingSongNumber);
  }
  if (currentlyPlayingSongNumber !== songNumber) {
      // Switch from Play -> Pause button to indicate new song is playing.
      $(this).html(pauseButtonTemplate);
      setSong(songNumber);
      currentSoundFile.play();
      updateSeekBarWhileSongPlays();
      var $volumeFill = $('.volume .fill');
      var $volumeThumb = $('.volume .thumb');
      $volumeFill.width(currentVolume + '%');
      $volumeThumb.css({left: currentVolume + '%'});
      updatePlayerBarSong();
  } else if (currentlyPlayingSongNumber === songNumber) {
      // Switch from Pause -> Play button to pause currently playing song.
        if (currentSoundFile.isPaused()) {
            $(this).html(pauseButtonTemplate);
            $('.main-controls .play-pause').html(playerBarPauseButton);
            currentSoundFile.play();
            updateSeekBarWhileSongPlays();
        } else {
            $(this).html(playButtonTemplate);
            $('.main-controls .play-pause').html(playerBarPlayButton);
            currentSoundFile.pause();
        }
    }
};

这是我遇到问题的地方。上面代码中的$(this)引用了我想在下面的函数中定位的类。在下面的代码中，我评论了我认为引用应该发生的位置。

var togglePlayFromPlayerBar = function() {

    if (currentSoundFile === null) {
        setSong(1);
        updatePlayerBarSong();
        updateSeekBarWhileSongPlays();
        $('.main-controls .play-pause').html(playerBarPauseButton);
        currentSoundFile.play();
        $('.song-item-number').first().html(pauseButtonTemplate);
        $(".volume > .seek-bar > .fill").css("width", "80.0%");
        $(".volume > .seek-bar > .thumb").css("left", "80.0%");
    } else if (currentSoundFile.isPaused()) {
        $('.main-controls .play-pause').html(playerBarPauseButton);
        currentSoundFile.play();
        //change player row icon;
    } else if (currentSoundFile != null) {
        $('.main-controls .play-pause').html(playerBarPlayButton);
        currentSoundFile.pause();
        //change player row icon;
    }
};

试图在另一个函数中引用一个变量

0 个答案: