데이터의 번호를 추가 한 번 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 %의 AC %의 A1 %의 E6 %의 B7 %의 BB %의 E5 %의 8A %의 A0 %의 E5 %의 A4 %의 9A %의 E5 %의 B0 %의 91 % E6의 %의 9D %의 A1의 %의 E6의 % 95 % B0의 %의 E6의 %의 8D %의 AE

　　긴 문서를 작성하지 마십시오, 대개 일기를 쓰기 때문에,이 심하게 작성하면 결코 마음, 약간 녹슨입니다.

　　오늘의 고통 무료 계란은, 그래서 당신은 하루 동안 뭔가에 대해 쓰고 싶어하고, 미래는 아래 (기록 된) 업데이트 된 것입니다.

　　시간이 너무 짧은, 지난 몇 달, 오늘 전달하는 너무 많은 최신 시간 1시 고려했다.

　　지점에 도착!

　　이것은이 클릭당, 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부터 시작) 데이터를로드 할 수 클릭

　　자식 코드 : HTTPS : //github.com/ZWLTZ/batchLoading/tree/master

보다 전문적인 프런트 엔드 지식의 확인 [2048] 원숭이 www.mk2048.com을

데이터의 번호를 추가 한 번 JS 클릭당

추천