Question

我在一页上有5个div。这样的事情：

<div id="div1"> some content </div>
<div id="div2"> some content </div>
<div id="div3"> some content </div>
<div id="div4"> some content </div>
<div id="div5"> some content </div>
<button> Load More </button>

我想只做第一个div加载，点击按钮加载更多，然后我想加载第二个div，如果他/她再次点击加载更多按钮，我想加载第三个div（但前两个div不应该隐藏）。可以使用Javascript或Jquery吗？

我是Javascript的新手。我尝试使用它：http://jsfiddle.net/vendettamit/QB8Hv/尝试了不同的版本，但我不能:(

我不需要隐藏类并使用css显示：none。如果用户没有点击按钮，我希望不加载这些div，因为我的流量很大。

Answer 1

将新课程设为“隐藏”，并尝试以下内容：

var showNextElement = function() {
    var elements = $('.hide');
    $(elements[0]).removeClass('hide');
}

$('#btn').addEventListener('click', showNextElement);

Answer 2

如果我正确理解了您的问题...您希望在用户第二次点击时加载其他图片。为此，当用户第二次点击它时，您需要指定不同的图像源。

有两种方法可以做到这一点。一种是构建一个用于存储图像源路径的JavaScript数组。当用户连续点击按钮时，从数组中获取下一个元素（使用增量变量）。

例如，

var imageSources = [
    "image1.jpg", 
    "image2.jpg", 
    "image3.jpg", 
    "image4.jpg", 
    "image5.jpg", 
]

然后当用户点击按钮时，

function onClick()
{
     // Get number of image tags already loaded
     var numberOfDivsLoaded = document.getElementById("parentDiv").getElementsByTagName('img').length;

     // Get the next array element
     var nextImageSource = imageSources[numberOfDivsLoaded + 1]

     // Then create an append a new div containing this image to the parent div
}

另一种方法是使用AJAX。当用户单击该按钮时，发送AJAX请求以将下一个图像加载到后端脚本。

使用Jquery或Javascript加载div

2 个答案: