Js achieve front-end player on a playlist at a function to delete the program

Feature on the front end of a player, the next song, play list of additions and deletions to change search, and so today we give a detailed explanation of the next logic implementation

1. Add to list
   Ideas: an array, the program name is added to the array, the array is achieved by determining, on the code
   

   var idList = [], // array to program an empty array var 
   playListIndex = 0; // current program playlist subscript again defines a subscript variable to store the 
   
   function FnAddList (list_data) {// list_data is an object, inside storing the program name, playback duration something like 
       var _id = list_data.title, // program name 
           _isAdd = true, // determination condition 
           _index = 0; // subscript 
       for (var i = 0; i <idList.length ; i ++) {// iterate values in the array 
           if (_id == idList [i] ) { // if there is an array of the title determination 
               _isAdd = to false; 
               the _index = I; // caption position index in the array 
           } 
       } 
       IF (_isAdd) { 
         idList.unshift (list_data.title);
         var _playListHtml = '<li class="playList-list-item" data-title="'+list_data.title+'" data-type="'+list_data.type+'" data-date="'+list_data.date+'" data-time="'+list_data.time+'" data-auther="China Plus Radio" data-url="'+list_data.url+'"><div class="playList-list-showsName">'+list_data.title+'</div><div class="playList-list-autherName">'+list_data.autherName+'</div><div class="playList-list-time">'+list_data.time+'</div><div class="playList-list-btns"><span class="playList-list-btns-remove" data-title="'+list_data.title+'" title="删除"></span></div></li>'; 
       // When you call FnAddList added to the list of active programs
       playListIndex = _index;  
       }
         $. (' # PlayList ul-List ') prepend (_playListHtml); // add to the page
   
         
       var _playListLength = $('#playList-list ul .playList-list-item').length-1; 
       $ ( '# playList .playList-ul-List-Item List'). EQ (_index) .addClass ( 'the Active'). SIBLINGS (). RemoveClass ( 'the Active') ; // add style to the current program in the playlist 
   
     }
   
   

    

2. An upper, a lower　
   ideas: Analyzing subscript playListIndex current program defaults to 0 on a one to -1 to +1
   

   var _item , _itemLength;  //节目节点和节目总数  全局变量
     function changeMedia(i){
         _item = $('#playList-list ul .playList-list-item') , _itemLength = _item.length-1;
         playListIndex+=i;
         if(playListIndex<0){
             playListIndex = 0;
         }else if(playListIndex>_itemLength){
             playListIndex = _itemLength;
         }else{
             var _this = _item.eq(playListIndex);
             FnAudioPlay(_this,true);
         }
         $('.playList-list-live').removeClass('active');
     };
   

   　　

3. About player displays hidden button
   
   idea: According to the current program is playListIndex subscript and the program determines if the total length of the current program _itemLength subscript 0 is the first track on an arrow hidden, the arrow shows a
   If current program index is equal to the total number of program listings -1 it is the last one, hidden under an arrow, an arrow on the display
   as the current program through the index does not satisfy the above two conditions, that is, in the middle of the list, this time on a song and the next song arrows are displayed
   
   
4. A program to delete the list of
   ideas: Is there a program to determine the array, after obtaining the subscript delete
   Key: indexOf method returns an array of front to back two parameters a subscript 1: The item to find, 2: Getting Started Find a location, usually 0
   delete an array of values for the two parameters splice array of methods 1: to find the index of the item in the array, 2: 1 start deleting several parameters from the specified position is to remove a 1
   

   Click to remove the program // 
       $ (Document) .on ( 'the Click', '. PlayList-List-Remove-btns', function () { 
         var _this = $ (the this), the current node // 
         _this_title = _this.attr (' data-title '), // current program title 
         _arrIndex; // to delete a program index 
         isRemoveBtnsClick = true; // delete event Analyzing 
         IF (idList.indexOf (_this_title, 0) = -1) {! 
           _arrIndex = idList.indexOf (_this_title, 0); 
           idList.splice (_arrIndex, 1); 
           . _this.parent () parent () the Remove ();. // delete click on the program 
           _item = $ ( '# playList- list ul .playList Item--list '); 
           _itemLength = _item.length; // delete a program to re-record the list of programs about the length of the program list the total number of 
           _nextItemIndex = _arrIndex;   
           .. IF (_this.parent () parent () hasClass (' the Active ' )) {
             playListIndex = _arrIndex; // delete the item to be assigned to the index playListIndex, this variable is a global variable, a case will be used in a process 
             if (_nextItemIndex <0) {// click program determines the default standard is less than 0 subscript 0, playing the first 
                 _nextItemIndex = 0; 
             } the else IF (_nextItemIndex> _itemLength) {// click program is determined greater than the total number of index equal to the total number of programs on the list, the last play 
                 _nextItemIndex _itemLength = -. 1; 
             } the else {// click program index is determined and smaller than the total length is greater than 0 
                 if (_nextItemIndex <= _itemLength - 1 ) {// click determination program index greater than 0 and less than or equal to the total length, to play the next 
                   var _this = _item.eq (_nextItemIndex); 
                   FnAudioPlay (_this, to true); 
                 } if the else {// delete the list of the program being played last on the first playlist click program determines the last subscript, to play the first music 
                   FnAudioPlay ( _item.eq (0), to true); 
                 } 
             }
           }
           if (_itemLength <= 0) { // empty list initialization when the player live content 
             // initialize player 
             FnAudioInit (); 
           } 
         } 
         return to false; 
       })