Question

我动态填充UL列表。这可能包含1个最多5个项目

我希望能够显示第一个列表项，然后点击该列表项中的按钮隐藏它并显示下一个。

到目前为止，我有这个 -

HTML结构

<ul class="grid">
   <li class="object">
     List Item 1
     <a class="show-next">Show the next list item</a>
   <li>
</ul>

的Javascript

$('.grid .object').hide().filter(':lt(1)').show();
$('.show-next').click(function(){
    $(".grid").find(".object").hide().next().show();
});

遗憾的是，此代码显示的是UL中的所有列表项，而不仅仅是下一个列表项。

有人帮我一把吗？

由于

Answer 1

尝试添加

.removeClass(active);

Answer 2

您可以更改代码，以便向活动元素添加active类，因为现在$(".grid").find(".object")正在查找li中的所有ul个对象，隐藏它们，寻找每个元素的下一个兄弟，然后显示那些元素......这将显示列表中的每个元素。如果将active类添加到当前有效按钮，则会阻止您的查询找到li中的所有ul个元素。

例如：

$('.show-next').click(function(ev){
    $(".grid").find(".object.active").hide().next().show().addClass("active");
    $(this).parent().removeClass("active");
});

Answer 3

如何：https://jsfiddle.net/fznk3ube/2/我已经更新了代码，我相信它现在包含了您要求的所有功能。

$(document).ready(function () {

    $('.object').hide();

    var clickListArray = $('.object').toArray();

    $(clickListArray[0]).show();



    $('.show-next').on("click", function () {
        var thisParent = $(this).parent();
        var nextInList = $(thisParent).next();
        $(thisParent).hide();
        $(nextInList).show();
    });

});

Answer 4

li的结束标记缺少反斜杠，例如： </li>代替<li>。

除此之外，试试这个：

$('.grid .object').hide().filter(':lt(1)').show();

$('.show-next').click(function(){
    $(".grid").find(".object").hide();
    $(this).parent().next().show();
    return false;
});

我在这里放了一个示例小提琴：https://jsfiddle.net/utvgLqp6/

请注意，无法检查是否是列表中的最后一项。

另外，如果要在动态创建的元素上使用它，则需要执行

$(document).on('click', '.show-next', function() {

代替

Answer 5

首先，您没有使用</li>关闭每个列表项。您可以获取parent()的帮助来查找所点击元素的父级＆amp;然后，可以隐藏它＆amp;可以使用next()显示下一个列表项

$('.grid .object').hide().filter(':lt(1)').show();
$('.show-next').click(function(){
    $(this).parent().hide().next().show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="grid">
   <li class="object">
     List Item 1
     <a class="show-next">Show the next list item</a>
   </li>
     <li class="object">
     List Item 2
     <a class="show-next">Show the next list item</a>
   </li>
     <li class="object">
     List Item 3
     <a class="show-next">Show the next list item</a>
   </li>
     <li class="object">
     List Item 4
     <a class="show-next">Show the next list item</a>
   </li>
     <li class="object">
     List Item 5
     <a class="show-next">Show the next list item</a>
   </li>
</ul>

Answer 6

以下是代码。

<ul class="grid">
   <li class="object">
     List Item 1<a class="show-next"> Show the next list item</a>
   </li>
        <li class="object">
     List Item 2
     <a class="show-next">Show the next list item</a>
   </li>
        <li class="object">
     List Item 3
     <a class="show-next">Show the next list item</a>
   </li>
</ul>

以下是您应插入的脚本。

$('.grid .object').hide().filter(':lt(1)').show();
$('.show-next').click(function(){
   $eL = $('.grid .object').filter(":visible");
  //  $(".grid").find(".object").hide().next().show();
    if($eL.next().length>0){
              $eL.next().show();
          }else{
               $('.grid .object')[0].show();
          }
});

Fiddle

动态隐藏/显示下一个列表项。 jQuery的

6 个答案: