Question

我有一个带有容器的index.html，我希望通过ajax点击加载内容。它看起来像这样：

<div id="loadcontent"></div>
<div id="more">Load More</div>

并且只有一个包含大量div的内容文件：

<div id="1" class="content">One</div>
<div id="2" class="content">Two</div>
<div id="3" class="content">Three</div>
<div id="4" class="content">Four</div>
<div id="5" class="content">Five</div>
<div id="6" class="content">Six</div>
<div id="7" class="content">Seven</div>
<div id="8" class="content">Eight</div>
<div id="9" class="content">Nine</div>
<div id="10" class="content">Ten</div>
<div id="11" class="content">Eleven</div>
<div id="12" class="content">Twelve</div>

这里是jquery代码：

$(document).ready(function () {
    var countItem = 0;

    $('#more').click(function(){
        countItem ++;
        $('<div/>').appendTo('#loadcontent').load('content.html #' + countItem)
            .hide()
            .fadeIn(1000);
    });
});

现在，当点击加载更多按钮时，它只加载一个div，因为它会计算ID。

是否可以使用ajax加载接下来的三个以上的div并将它们附加到已经加载的div中？如果是，我怎样才能使这个工作？例如：首先点击：1-3，第二次点击：1-6，第三次点击：1-9等...

非常感谢任何帮助。

更新

我不想一次加载内容，然后使用.show()或类似内容显示内容。它应该是每次点击的ajax请求。

Answer 1

如果您计划加载一个包含所有内容的文件然后部分显示，则无需为每个部分发出请求，只需一次加载所有内容并在需要时显示。

我通过点击按钮显示了部分内容，请参阅工作示例here：

$(window).ready(function() {
  var $contentContainer = $('.loadcontent');
  var lastShownIndex = 0; // id of latest shown div
  var showPerClick = 3;
  var elementsCount = 0; // total available elements count 

  // function to show elements with passed ids
  var showElements = function(ids) {
    ids.forEach(function(id) {
        $contentContainer.find('#' + id).fadeIn(500);
    });
  }
  // function to generate array [start, start + 1, ..., end]
  var range = function(start, end) {
    return Array.apply(null, Array(end - start + 1)).map(function (_, i) {
        return i + start;
    });
  }
  // function to generate array of unshown divs
  var generateIds = function() {
    if (lastShownIndex >= elementsCount) return [];
    var ids = range(lastShownIndex + 1, Math.min(lastShownIndex + showPerClick, elementsCount));
    lastShownIndex += showPerClick;
    return ids;
  }
  // load content into container
  $contentContainer.load('content.html', function() {
    elementsCount = $contentContainer.find('.content').length;
    showElements(generateIds()); // show elements after page load
  });
  // show items partially by clicking a button
  $('#more').click(function() {
    showElements(generateIds());
    if (lastShownIndex >= elementsCount) { // hide button when no elements are available
        $(this).hide();
    }
  });
});

Answer 2

我建议您只提出一个请求并将请求保证存储在变量中。使用slice()过滤每次要添加的新项目

$(function() {
  var contentPromise = null,
    itemsPerClick = 3,
    startIndex = 0,
    $moreButton = $('#more');

 $moreButton.click(function() {
    getContent()
      .then(insertContent)
      .fail(function() {
        console.error("Failed request!")
      });
  });

  function getContent() {
    if (!contentPromise) {
      // store request promise
      contentPromise = $.get('content.html').then(function(resp) {
        // return jQuery object that can easily be sliced
        return $(resp).filter('div');
      })
    }
    return contentPromise;
  }

  function insertContent($content) {
    var endIndex = startIndex + itemsPerClick,
      $newItems = $content.slice(startIndex, endIndex);

    $('<div>').append($newItems)
      .appendTo('#loadcontent')
      .hide()
      .fadeIn(1000);

    // increment start 
    startIndex = endIndex;
    // hide button when none left
    if (startIndex >= $content.length) {
      $moreButton.hide()
    }
  }
});

<强> Demo

ajax - 来自一个文件的元素的增量加载

2 个答案: