JSプログラムを削除するための関数でプレイリスト上のフロントエンドプレーヤーを達成

プレイヤーのフロントエンド、次の曲、検索を変更するには、追加および削除のプレイリスト上の機能、およびので、今日、我々は次のロジックの実装の詳細な説明を与えます

  1. リストに追加します
    アイデア:アレイ、プログラム名がアレイに追加され、配列が決定することによって達成され、コードに
    VAR空の配列VARプログラムにidList = [] //配列
    playListIndex = 0; //現在のプログラムのプレイリストを再び格納する添え字の変数を定義添字
    
    関数FnAddList(list_dataを){// list_dataが内部オブジェクトであります以下のようなプログラム名を格納し、再生時間の何か
        のvar _id = list_data.title、//プログラム名
            _isAdd =真、//決意条件
            _index = 0; //添字
        (VAR用I = 0; I <idList.length ; iは++){//配列内の反復値
            (もし_id == idList [I] ){ //タイトル決意のアレイがある場合
                _isAdd = falseには、
                _index = Iは、アレイ内の//キャプション位置指標
            } 
        } 
        (_isAdd){IF 
          idList.unshift(list_data.title)。「; 
          。$( '#プレイリスト一覧UL')プリペンド(_playListHtml)。//添加到页面中
    
          
        } 
        playListIndex = _index。  
        VAR _playListLength = $( '#プレイリスト-リストUL .playListリスト項目')の長さ-1。 
        //あなたはFnAddListは、アクティブなプログラムのリストに追加呼び出すと
        $( '#プレイリスト-リストUL .playListリスト項目')EQ(_index).addClass( 'アクティブ')兄弟()removeClass( 'アクティブ'); ... // 現在のプレイリストにスタイルを追加プログラム
    
      }

     

  2. 上下 
    のアイデア:1 -1 +1までに0に添字playListIndex現在のプログラムのデフォルトの分析

    VaRの_item、_itemLength。//节目节点和节目总数全局变量
      関数changeMedia(I){ 
          _item = $( '#プレイリストリストUL .playListリスト項目')、_itemLength = _item.length-1。
          playListIndex + = I; 
          IF(playListIndex <0){ 
              playListIndex = 0。
          }もしそうでなければ(playListIndex> _itemLength){ 
              playListIndex = _itemLength。
          }他{ 
              VAR _this = _item.eq(playListIndex)。
              FnAudioPlay(_this、真の); 
          } 
          $( 'プレイリスト-リスト-ライブ')removeClass('アクティブ')。
      }。
    

      

  3. 約プレーヤーが表示され、ボタンの隠された

    アイデアを:現在のプログラムによると添字playListIndexであり、プログラムは、添字0は、隠された矢の最初のトラックである_itemLength現在のプログラムの合計の長さかどうかを判断し、矢印が示して
    いる場合、現在のプログラムをインデックスが番組リスト項目の総数に等しい-1それが最後のものである、矢印の下に隠れて、ディスプレイ上の矢印
    のインデックスを通る現在のプログラムとしては、上に、リストの途中で、つまり、今回、上記の二つの条件を満たしません歌と次の曲の矢印が表示されます

  4. リストを削除するプログラム
    のアイデアは:配列を決定するためのプログラムは、添字が削除取得した後、あります
    キー:、検索する項目2:indexOfメソッドは、2つのパラメータ添字1を前後の配列を返しますはじめに場所を見つけ、通常0
    方法1の2つのパラメータスプライスアレイの値の配列を削除:アレイ内の項目のインデックスを検索するために、2:指定された位置から複数のパラメータを削除する1スタート1を除去することです
    プログラム//削除するにはクリックして
        $(ドキュメント).on( 'クリック'、 'プレイリスト-リスト・削除-btns'、機能(){ 
          VARの_this = $(この)は、現在のノード// 
          ' _this_title = _this.attrを(データタイトル「)、//現在の番組タイトルが
          _arrIndex; //削除するプログラム指数は
          isRemoveBtnsClick =真; //分析イベントを削除
          !IF(idList.indexOf(_this_title、0)= -1){ 
            _arrIndex = idList.indexOf(_this_title、0); 
            idList.splice(_arrIndex、1); 
            。_this.parent()親()削除();. //プログラムをクリックして削除
            _item = $(「#playList-リストUL .playList アイテム-リスト「); 
            _itemLength = _item.length; //再録音するプログラムのリストの長さについてのプログラムのリストを、プログラムを削除の総数
            _nextItemIndex = _arrIndex。   
            ... IF(_this.parent()親()hasClass(」 'アクティブ)){
              playListIndex = _arrIndex; //この変数は、ケースは、プロセスで使用されるグローバル変数であるインデックスplayListIndexに割り当てられる項目を削除
              (_nextItemIndex <0){//プログラムをクリックした場合、デフォルトの標準が0未満であると判断添字0、最初の再生
                  _nextItemIndex = 0; 
              }そうIF(_nextItemIndex> _itemLength){//クリックプログラムはリスト上のプログラムの合計数に等しいインデックスの総数より大きく決定され、最後のプレー
                  _nextItemIndex _itemLength = - 1; 
              }そう{//クリックプログラムインデックスが決定され、全体の長さよりも小さいが0より大きい
                  場合(_nextItemIndexは<= _itemLength - 1 ){// 全長に0より大きく、以下クリック決意プログラムインデックスは、再生する次
                    _this = _item.eq VAR (_nextItemIndex); 
                    FnAudioPlay(_this、真の); 
                  }他{//最初のプレイリストをクリックしプログラム上で最後に再生されているプログラムのリストが最初に音楽再生するには、最後の添字を判断し削除した場合
                    FnAudioPlayを( _item.eq(0)、真の); 
                  } 
              }
            }
            IF(_itemLength <= 0){ // 空のリストを初期化するときプレーヤーライブコンテンツ
              //初期化プレイヤ
              FnAudioInit(); 
            } 
          } 
          偽に戻ります; 
        })
    

      

おすすめ

転載: www.cnblogs.com/webXiaoAYang/p/10945482.html