JS-ごとのクリックデータの数を追加するために、一度

オリジナルリンク: https://www.mk2048.com/blog/blog.php?id=h0j01202c21j&title=JS%E6%AF%8F%E7%82%B9%E5%87%BB%E4%B8%80%E6 %交流%A1の%E6%以下のB7 %BB%E5%8A%A0%E5%A4%9A%E5%以下のB0%91%E6%以下の9D%A1%E6%の95%B0%のE6の%の8D%AE

  長い文書を書いてはいけません、通常は日記を書くので、これはひどく書かれた場合は気にしないで、少しさびています。

  今日の痛み無料卵は、あなたが一日中何かについて書きたいし、将来はダウン(書き込まれた)更新されています。

  時間が短すぎる、過去数ヶ月は、今日は合格のためのあまり、最新の時間1時00分と考えます。

  ポイントを取得!

  これは、jQueryのパッケージに基づいてプラグイン指定されたデータを、追加するためにクリックごと、メソッド名のbatchLoadingを呼び出し、シンプルなワンボタン操作に、常に最初に来て、ジジを冷却していないです。

  方法は以下の通りです:

  HTML

<div class="default-batch-box batch-box">
    <ul class="default-list-box">
    </ul>
    <div class="default-batch-unlock">
        <span></span>
    </div>
</div>

 

  JAVASCRIPT

<script>
var data = [1,2,3,4,'a','b','c','d',1,2,3,4,5,6,9,]
batchLoading({
    node: ['.default-list-box','.default-batch-unlock'], // 第一个节点为添加数据class 第二个为点击事件class
    data: data,    // 总数据
    default: 2, // 默认从第几条数据开始
    everyTime: 4, // 每次添加多少条数据
    method: function (data) { // 循环数据
        var str = ''
        var tiny = data
        str  = '<li>'
        str  = '<span>'   tiny  '</span>'
        str  = '<span>上海</span>'
        str  = '<span>机械业</span>'
        str  = '<span>加载器</span>'
        str  = '<span>去参团</span>'
        str  = '</li>'
        return str
    },
    complate: function  () {
        alert('加载结束')
    }
})
</script>

   包装batchLoading.jsの方法

 1 (function  (g) {
 2     var _plus = 1
 3     function addBatchTemplate (data, start, stop, everyTimes, fallBack, complate) {
 4         var str = ''
 5         if ((stop-everyTimes) <= data.length) {
 6             for (var i = start; i < stop; i  ) {
 7                 if (data[i]){
 8                     var tiny = data[i]
 9                     str  = fallBack(tiny)
10                 }
11             }
12         }
13         else {
14             complate()
15         }
16         return str
17     }
18 
19     function implementionAddBatchTemplate (option, start, stop, everyTimes, fallBack, complate) {
20         $(option.node[0]).append(addBatchTemplate(option.data, start, stop, everyTimes, fallBack, complate))
21     }
22 
23     function excuteBatchLoadData (option, everyTimes, fallBack, complate) {
24         var start = _plus
25         implementionAddBatchTemplate(option, start * everyTimes,   _plus * everyTimes, everyTimes, fallBack, complate)
26     }
27 
28     function handleEventLoadData (option, everyTimes, fallBack, complate) {
29         $(option.node[1]).unbind('click').on('click', function  (e) {
30             excuteBatchLoadData(option, everyTimes, fallBack, complate)
31         })
32     }
33 
34     function batchLoading (params) {
35         implementionAddBatchTemplate(
36             {
37                 data: params.data,
38                 node: params.node
39             }, 
40             params.default, 
41             params.everyTime, 
42             params.everyTime, 
43             params.method,
44             params.complate
45         )
46         handleEventLoadData(
47             {
48                 data: params.data,
49                 node: params.node
50             }, 
51             params.everyTime, 
52             params.method,
53             params.complate
54         )
55     }
56 
57     g.batchLoading = batchLoading
58 })(this ? window : global)
コードの表示

 

  レンダリングは、現在complateメソッドを呼び出すためのクリックが終了した後、第二の先頭から各クリックプラス4つのデータは、デフォルトのデータを見られています。

  デモDEMO(0から始まる)のデータをロードするためにクリック

  gitのコードします。https://github.com/ZWLTZ/batchLoading/tree/master

 


より専門的なフロントエンドの知識、作る [2048] APE www.mk2048.comを

おすすめ

転載: blog.csdn.net/whiteGay/article/details/102748306