Javascript 不使用jquery插件构建自定义分页逻辑

我被困在如何继续我的自定义分页。在本例中，我没有内容部分，但我知道如何做到这一点，只需根据单击的索引隐藏和显示基础

我被困在如何将元素分割并处理成更好的用户体验上，就像这样

var html=''；
用于（项目中的变量i）{
html+='
'+item[i]+'
'；
}

拆分分页的UI其实并不难，这取决于您希望将其变得多么复杂

例如，我在没有jQuery帮助的情况下重新实现了jsbin中的代码，并添加了一个名为

isPageInRange

的函数，该函数将检查您的页面当前是否在范围内，并返回true或false

因此，主要的逻辑变化如下：

for(var i in item){
  if ( isPageInRange( curPage, i, pageLen, 2, 2 ) ) {
    html += '<li data-page="' + i + '">' + item[i] + '</li>';
    // as we added a page, we reset the separatorAdded
    separatorAdded = false;
  } else {
    if (!separatorAdded) {
      // only add a separator when it wasn't added before
      html += '<li class="separator" />';
      separatorAdded = true;
    }
  }
}

---

请将您添加的更多代码添加到jsbin，这是一个非常有效的问题，在这里添加是有意义的

for(var i in item){
  if ( isPageInRange( curPage, i, pageLen, 2, 2 ) ) {
    html += '<li data-page="' + i + '">' + item[i] + '</li>';
    // as we added a page, we reset the separatorAdded
    separatorAdded = false;
  } else {
    if (!separatorAdded) {
      // only add a separator when it wasn't added before
      html += '<li class="separator" />';
      separatorAdded = true;
    }
  }
}