javascript - 嵌套在each()中的函数应用于所有元素而不是单个元素

Question

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

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

$(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 声明为局部变量。由于没有变量声明，因此每次循环都会覆盖全局变量，因此所有 anchor 都会为最后一个 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>