嵌套在应用到所有元素而不是单个

Question

我有一个用于将分页应用于一系列类的jquery脚本。大多数情况下，一切正常，除了我有一个嵌套函数（showPage），该函数仅应应用于当前类，而应在所有类中使用元素，并将操作应用于最后一项。

已经尝试过切换到for循环而不是each循环，但是提供了相似的功能，但是存在相同的问题。

$(document).ready(function() {

  var lists = document.getElementsByClassName('content_display');
  listSize = 5;
  var fourWide = window.matchMedia("(max-width: 800px)");
  var threeWide = window.matchMedia("(max-width: 600px)")
  if (fourWide.matches) {
    // Screen is less than 800px
    listSize = 4;
  }
  if (fourWide.matches) {
    // Screen is less than 600px
    listSize = 3;
  }

  $(lists).each(function() {
    var contentCount = $(this).find('ul li').length
    var pageCount = contentCount / listSize;
    if (contentCount < listSize)
      $(this).find(".content_more").hide()
    var $e = $(this)
    var $f = $(this).find('.content_item')
    for (var i = 0; i < pageCount; i++) {

      $(this).find(".pagination").append('<a href="#">' + (i + 1) + '</a> ');
    }
    $(this).find(".pagination a").first().addClass("active")
    showPage = function(page) {
      $f.hide();
      $f.each(function(n) {
        if (n >= listSize * (page - 1) && n < listSize * page)
          $(this).show();
      });
    }

    showPage(1);

    $(this).find(".pagination a").click(function() {
      $e.find(".pagination a").removeClass("active");
      $(this).addClass("active");
      showPage(parseInt($(this).text()))
    });
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content_row">
  <div class="content_display">
    <div class="contentList_container">
      <ul>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
      </ul>
    </div>
    <div class="content_more"></div>
    <div class="pagination"></div>
  </div>
</div>
<div class="content_row">
  <div class="content_display">
    <div class="contentList_container">
      <ul>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
      </ul>
    </div>
    <div class="content_more"></div>
    <div class="pagination"></div>
  </div>
</div>
<div class="content_row">
  <div class="content_display">
    <div class="contentList_container">
      <ul>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
      </ul>
    </div>
    <div class="content_more"></div>
    <div class="pagination"></div>
  </div>
</div>

Answer 1

您需要将showpage声明为局部变量。由于没有变量声明，因此每次循环都会覆盖全局变量，因此所有锚均在最后一个DIV上调用showpage函数。

$(document).ready(function() {

  var lists = document.getElementsByClassName('content_display');
  var listSize = 5;
  var fourWide = window.matchMedia("(max-width: 800px)");
  var threeWide = window.matchMedia("(max-width: 600px)")
  if (fourWide.matches) {
    // Screen is less than 800px
    listSize = 4;
  }
  if (fourWide.matches) {
    // Screen is less than 600px
    listSize = 3;
  }

  $(lists).each(function() {
    var contentCount = $(this).find('ul li').length
    var pageCount = contentCount / listSize;
    if (contentCount < listSize)
      $(this).find(".content_more").hide()
    var $e = $(this)
    var $f = $(this).find('.content_item')
    for (var i = 0; i < pageCount; i++) {

      $(this).find(".pagination").append('<a href="#">' + (i + 1) + '</a> ');
    }
    $(this).find(".pagination a").first().addClass("active")
    var showPage = function(page) {
      $f.hide();
      $f.each(function(n) {
        if (n >= listSize * (page - 1) && n < listSize * page)
          $(this).show();
      });
    }

    showPage(1);

    $(this).find(".pagination a").click(function() {
      $e.find(".pagination a").removeClass("active");
      $(this).addClass("active");
      showPage(parseInt($(this).text()))
    });
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content_row">
  <div class="content_display">
    <div class="contentList_container">
      <ul>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
      </ul>
    </div>
    <div class="content_more"></div>
    <div class="pagination"></div>
  </div>
</div>
<div class="content_row">
  <div class="content_display">
    <div class="contentList_container">
      <ul>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
      </ul>
    </div>
    <div class="content_more"></div>
    <div class="pagination"></div>
  </div>
</div>
<div class="content_row">
  <div class="content_display">
    <div class="contentList_container">
      <ul>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
        <li class="content_item"></li>
      </ul>
    </div>
    <div class="content_more"></div>
    <div class="pagination"></div>
  </div>
</div>