jQuery addClass example

Change class name on click in jQuery

by D S

HTML

<div id="item1"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

JavaScript

(function($) {

  $.fn.MusicPlayer = function(options) {
    var settings = $.extend({
      // These are the defaults
      JSON1: "",
      JSON2: "",
      JSON3: "",
      JSON4: ""
    }, options);
    var thisObj;
    thisObj = this;



    thisObj.each(function() {
      return thisPlugin.each(function() {

        $.when(parseJSON1(), parseJSON2())
          .then(
            parseJSON3(station_data.dj), parseJSON4(station_data.songurl)
          )
          .then(
            _cacheOptions
          )
          .then(
            _cacheDom
          )
          .then(
            _events

          ).then(
            _render
          );

      });

      var station_data, history_data, itunes_data, coverList_data;

      // Core Functions

      function _cacheOptions() {
        station_data = stationInfo[0];
        history_data = stationHistory[0];
        itunes_data = itunesInfo[0];
        coverList_data = coverInfo[0];
      }

      function _cacheDom() {}

      function _events() {}

      function _render() {}

      // Functions

      function parseJSON1() {
        return $.getJSON(settings.JSON1);
      }

      function parseJSON2() {
        return $.getJSON(settings.JSON2);
      }

      function parseJSON3(searchTerm) {
        return $.getJSON(settings.JSON3);
      }

      function parseJSON4() {
        return $.getJSON(settings.JSON4);
      }

    });




  };



  $("#item1").MusicPlayer({
    JSON1: "https://api.myjson.com/bins/6od6t", // General Info
    JSON2: "https://api.myjson.com/bins/1e8mr1", // History
    JSON3: "https://api.myjson.com/bins/695cl", // iTunes result
    JSON4: "https://api.myjson.com/bins/11sghp" // Cover's list
  });


}(jQuery));