Question

$(function() {
  var jw;
  jw = Player;
  return $('.btn-control:not(.add-btn)').toggle(function() {
    var mnetInfo;
    mnetInfo = {
      albumId: $(this).data('album-id'),
      trackId: $(this).data('song-id')
    };
    if (jwplayer() !== void 0 && $(this).hasClass('current')) {
      jw.play();
    } else {
      jw.get(mnetInfo);
      $(document.body).find('a[class*="pause"]').removeClass('pause').addClass('play');
      $(document.body).find('td.bold').removeClass('bold');
      $(document.body).find('.current').removeClass('current');
      if ($(document.body).find($(this)).parentsUntil('table').length > 0) {
        $(document.body).find('tr#' + mnetInfo.trackId + ' td.song_info').addClass('bold');
      }
    }
    $(this).removeClass('play').addClass('pause current');
    console.log("FIRST");
    return false;
  }, function() {
    jw.pause();
    $(this).removeClass('pause').addClass('play');
    console.log("SECOND");
    return false;
  });
});

以上代码与我的jwPlayer（）实现交互工作，并且在前两次点击时工作正常（点击它开始播放的第一张专辑上的播放，点击第二张专辑开始播放的第二张专辑，但如果你单击在另一个专辑上播放该功能会触发暂停切换，而不是触发播放切换）...希望这是有意义的

工作代码：

 $(function() {
  var jw;
  jw = Player;
  $('.play').live("click", function() {
    var mnetInfo;
    mnetInfo = {
      albumId: $(this).data('album-id'),
      trackId: $(this).data('song-id')
    };
    if (jwplayer() !== void 0 && $(this).hasClass('current')) {
      jw.play();
    } else {
      jw.get(mnetInfo);
      $('a[class*="pause"]').removeClass('pause').addClass('play');
      $('td.bold').removeClass('bold');
      $('.current').removeClass('current');
      if ($(this).parentsUntil('table').length > 0) {
        $('tr#' + mnetInfo.trackId + ' td.song_info').addClass('bold');
      }
    }
    $(this).removeClass('play').addClass('pause current');
    return false;
  });
  return $('.pause').live("click", function() {
    jw.pause();
    $(this).removeClass('pause').addClass('play');
    return false;
  });
});

Answer 1

Toggle将其状态保持为特定元素。因此，在连续调用中调用同一元素时，它只会在两个回调之间交替。如果你想在连续的函数之间切换，无论点击哪个元素，你都必须保持自己的状态并在自己的暂停/播放之间交替，或者总是在同一个元素上调用toggle（fn1，fn2）。

您还应该学习如何简化jQuery的使用。例如，此代码：

  $(document.body).find('a[class*="pause"]').removeClass('pause').addClass('play');
  $(document.body).find('td.bold').removeClass('bold');
  $(document.body).find('.current').removeClass('current');
  if ($(document.body).find($(this)).parentsUntil('table').length > 0) {
    $(document.body).find('tr#' + mnetInfo.trackId + ' td.song_info').addClass('bold');
  }

应该是：

  $('a[class*="pause"]').removeClass('pause').addClass('play');
  $('td.bold').removeClass('bold');
  $('.current').removeClass('current');
  if ($(this).parentsUntil('table').length > 0) {
    $('tr#' + mnetInfo.trackId + ' td.song_info').addClass('bold');
  }

您不会使用$(document.body).find()启动每个选择器。

jQuery .toggle（）事件触发了

1 个答案: