Question

我有一个内部有许多相似元素的div，例如：

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

我想在加载页面时只显示第一个li，然后我想要一个click函数来加载下一个隐藏项所以两个li正在显示。然后继续进行，以便只需点击同一按钮即可显示每个项目。

我尝试使用addClass

隐藏第一个使用jQuery加载的项目

然后我想点击，找到first hasClass和addClass作为新班级。

$('li').addClass('hide-listings');
$('li').first().removeClass('hide-listings').addClass('show-listings');

$('#load').click(function() {
  $('li').first().hasClass('hide-listings').removeClass('hide-listings').addClass('show-listings');
});

然而，这根本不起作用。关于如何做到这一点的任何想法？

Codepen

Answer 1

用这个更新你的JS：

$(function() { // when page is done loading

    $('li')
        .addClass('hide-listings'); // add classes to li's

    $('li') // get li
        .first() // only get first
        .removeClass('hide-listings') // remove a class
        .addClass('show-listings'); // add a class

    $('#load')
        .click(function() { // when #load is clicked
          $('ul') // get ul
            .find('.hide-listings') // find class
            .first() // get only the first, if not found, stop here
            .removeClass('hide-listings') // remove class
            .addClass('show-listings'); // add class
        });

});

Answer 2

这是更简单的方法

HTML （与以前相同）

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
<div id="load">Load more...</div>

CSS （更简单，1行）

li {display:none;}

<强> JS

$('li').first().show();

$('#load').click(function() {
  $('li:hidden').first().show();
});

Answer 3

看看这个例子。非常简单 - JSFiddle

首先，获取'li'的所有jQuery选定元素，并从索引1中的元素开始应用addclass - 注意gt（0）表示大于0。

在每次点击之后，我搜索具有hide-listings类的第一个li并将其删除。

<强> HTML

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
<div id="load">Load more...</div>

<强> JS

$('li:gt(0)').addClass('hide-listings');  //hide all the li elements in the jquery selector starting from 1 (gt(0) = greater than 0)


$('#load').click(function() {
  $('li.hide-listings').first().removeClass('hide-listings');  //onclick get the first li that has the hide-listeing class and remove that class.

});

<强> CSS

.hide-listings{display:none;}

Answer 4

首先，您不需要使用类来显示/隐藏元素。你可以使用jquery hide（）和show（）方法来做到这一点。

您的javascript文件如下所示：

$('li').hide();
$('li').first().show();

var n = 1;
$('#load').click(function() {
  $('li').eq(n).show();
  n++;

});

首先隐藏所有li元素，然后显示第一个元素。你有一个变量n跟踪当前的li元素，并使用eq（）方法选择索引n处的元素。然后每按一次“显示更多...”就增加n。

Codepen example

使用jQuery

Codepen

4 个答案: