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

The above code works with interacting with my implementation of jwPlayer() and works fine for the first two clicks (click play on the first album it begins to play, click play on second album the second album begins to play, but if you click play on another album the function triggers the pause toggle instead of firing the play toggle)… hope that makes sense

Working Code:

 $(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 keeps it’s state to a specific element. So, it will only alternate between the two callbacks when called on the same element in successive calls. If you want to toggle between successive functions no matter which element is clicked on, then you will have to keep your own state and alternate between the pause/play yourself or always call toggle(fn1, fn2) on the same element.

---

You also should learn how to simplify your use of jQuery. For example, this code:

  $(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');
  }

should be:

  $('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');
  }

You do not start every selector with $(document.body).find().