如何加载与Jquery的每次点击每一个从同一个对象

-1

<html> 

<head> 
    <script src="js/jquery.min.js"></script> 
    <style> 
      button {padding: 20px;} 
    </style> 

    <script> 
$(document).ready(function() { 

    var app = { 

     start: function() { 
      /* do something */ 
      var obj = [{ 
       "id": 0, 
       "firstname": "John", 
       "lastname": "Doe", 
       "email": "[email protected]" 
      }, { 
       "id": 1, 
       "firstname": "Mary", 
       "lastname": "Smith", 
       "email": "[email protected]" 
      }, { 
       "id": 2, 
       "firstname": "Paul", 
       "lastname": "Frances", 
       "email": "[email protected]" 
      }, { 
       "id": 3, 
       "firstname": "Frances", 
       "lastname": "Paul", 
       "email": "[email protected]" 
      }, { 
       "id": 4, 
       "firstname": "Alex", 
       "lastname": "Paul", 
       "email": "[email protected]" 
      }, { 
       "id": 5, 
       "firstname": "Harold", 
       "lastname": "Miller", 
       "email": "[email protected]" 
      }, { 
       "id": 6, 
       "firstname": "Trina", 
       "lastname": "Torres", 
       "email": "[email protected]" 
      }, { 
       "id": 7, 
       "firstname": "Alice", 
       "lastname": "Rogers", 
       "email": "[email protected]" 
      }, { 
       "id": 8, 
       "firstname": "Beth", 
       "lastname": "Peters", 
       "email": "[email protected]" 
      }]; 
      console.log('obj: ', obj) 

      $.each(obj, function(index, item) { 

       $('.test') 
        .append(item.email + '</h3>') 
        .append(item.firstname + '<br/>') 
        .append(item.lastname + '<br/>') 

       console.log('Index' + index); 

       if (index === 4) { 
        nextIndex = index + 1; 
        return false; 

        console.log('Next Index: ' + nextIndex); 

       }; 
      }); 

      $('.load-data').click(function() { 

       $.each(obj, function(nextIndex, item) { 
        console.log('nextIndex: ' + nextIndex); 
        $('.test') 
         .append(item.email + '</h3>') 
         .append(item.firstname + '<br/>') 
         .append(item.lastname + '<br/>') 

        //console.log('Index' +nextIndex); 

       }); 

      }); 

     } 

    }; 

    app.start(); 
}); 
</script> 
</head> 


<body> 
<div class="test"></div> 
<button class="load-data">Load More</button> 
</body> 
</html>

来源

2014-06-04 Shoaib Ud-Din

你想让我们把所有的代码放到一些小提琴里面吗？ –

不要害羞，用几句话解释你的问题。 –

当然，如果你可以 –

我有几分钟的时间，和一些边缘失眠，所以我想我会提供这种方法其中，基本上采用slice() 4个项目：

$(document).ready(function() { 

    var app = { 
     // all but the first object removed, for brevity 
     'data': [{ 
      "id": 0, 
       "firstname": "John", 
       "lastname": "Doe", 
       "email": "[email protected]" 
     }], 
      // setting and caching local variables: 
      'outputTo': document.querySelector('.test'), 
      'loadSize': 4, 
      'loadFrom': 0, 
      'append': function() { 
      // creating elements to use later: 
      var frag = document.createDocumentFragment(), 
       span = document.createElement('span'), 
       div = document.createElement('div'), 
       tmp1, tmp2, tmp3, wrap; 
      // taking the data object from above, 
      // slicing it from the loadFrom index to the loadFrom + loadSize index, 
      // iterating over those elements using forEach: 
      this.data.slice(this.loadFrom, this.loadFrom + this.loadSize).forEach(function (a) { 
      // I *really* wish I could have thought of a way to abbreviate 
      // this section; it feels horrible... 

       // caching temporary elements: 
       tmp1 = span.cloneNode(); 
       // setting classnames on temporary elements for styling (if required): 
       tmp1.className = 'email'; 
       tmp2 = span.cloneNode(); 
       tmp2.className = 'firstname'; 
       tmp3 = span.cloneNode(); 
       tmp3.className = 'lastname'; 
       wrap = div.cloneNode(); 

       // appending the relevant text to the temporary elements:  
       tmp1.appendChild(document.createTextNode(a.email)); 
       tmp2.appendChild(document.createTextNode(a.firstname)); 
       tmp3.appendChild(document.createTextNode(a.lastname)); 

       // appending children to the 'wrap' element: 
       wrap.appendChild(tmp1); 
       wrap.appendChild(tmp2); 
       wrap.appendChild(tmp3); 

       // then appending the wrap element to the documentFragment: 
       frag.appendChild(wrap); 
      }); 

      // setting the index for the next run of the function: 
      this.loadFrom = (this.loadFrom + this.loadSize); 
      // appending the created elements (wrapped in the documentFragment) 
      // to the designated output-element: 
      this.outputTo.appendChild(frag); 
     } 

    }; 
    // calling the function: 
    app.append(); 
    // binding the function to the click-event of the '.load-data' button, 
    // using 'bind(app)' to ensure that 'this' within the function refers 
    // to the 'app', *not* the element upon which the handler was triggered: 
    document.querySelector('.load-data').addEventListener('click', app.append.bind(app)); 
});

JS Fiddle demo。

参考文献：

来源

2014-06-05 01:35:21

如何加载与Jquery的每次点击每一个从同一个对象

回答

相关问题