Question

我的代码：

<div class="list">
    <ul id="myList1">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ul>
    <a id="loadMore">Load more</a>
</div>

<div class="list">
    <ul id="myList2" style="display: none;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <a id="loadMore">Load more</a>
</div>

<ul> id可以是mylist2，mylist3,4,5等。

看看我到目前为止的工作：

$(document).ready(function () {
    $('#myList li').hide();

    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
});

只是使用静态选择器。我仍然无法弄清楚如何将动态选择器放在基于<ul id="mylist1 etc">的jquery脚本中，也可以在<a id="loadMore">Load more</a>上处理点击事件。

这是 fiddle

Answer 1

文档范围内的

id属性值should be unique，因此您的问题的原因在于您使用的是id="loadMore"，而不是班级名称class="loadMore"。

您的代码也相对复杂，如果您将使用jQuery DOM遍历和过滤功能，它可以更简单：

$(document).ready(function () {
  // Taking all UL inside lists
  $('.list > ul').each(function(){
    // Hiding all list elements except first 3
    $(this).find('li').slice(3).hide();
  });
  // Handling clicks to "load more" links
  $('.loadMore').on('click', function() {
    // Searching for previous UL in it
    var $list = $(this).prev('ul');
    // Taking next 5 hidden items and displaying them
    $list.find('li:hidden').slice(0,5).show();
    // If last list item is already visible - hide "load more" link
    if ($list.find('li:last-child').is(':visible')) {
      $list.next('.loadMore').hide();
    }
  })
});

.loadMore {
    color:green;
    cursor:pointer;
}
.loadMore:hover {
    color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
    <ul id="myList">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
        <li>g</li>
        <li>h</li>
        <li>i</li>
        <li>j</li>
        <li>k</li>
        <li>l</li>
        <li>m</li>
        <li>n</li>
        <li>o</li>
    </ul>
    <a class="loadMore">Load more</a>
</div>

<div class="list">
    <ul id="myList2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
    </ul>
    <a class="loadMore">Load more</a>
</div>

Answer 2

如果我理解正确，每次按下它时，您需要使用一个按钮再显示5个项目。

在这种情况下，我会做这样的事情

$('#loadMore').click(function () {    
    var numberOfLisToShow = 5; //for example
    for(var i = 0; i < numberOfLisToShow; i++) {
        //find last visible item and get the next item
        $("ul#yourId li:visible:last").next().show();
    }
});

但首先尝试使用css而不是javascript隐藏您的元素，并确保至少保留一个可见的

jQuery中的动态选择器

2 个答案: