jQuery一个按钮循环来显示/隐藏兄弟元素

我想用循环的方式显示/隐藏通过一个无序的元素列表中的一个按钮。页面加载，显示第一个元素，点击按钮，显示的元素被隐藏，下一个显示...有点像在幻灯片中点击下一个。问题是我不知道如何停止或重置第一个if语句后的点击功能。现在触发该功能可以解决所有问题。有人可以看看我的代码，请给我一只手吗？jQuery一个按钮循环来显示/隐藏兄弟元素

var daily = '.daily_goal_activity li'; 

$(daily).addClass(function (index) { 
     return "item-" + index; 
    }); 
    $('.item-0').show(); 
}); 

$('#activity_toggle').click(function() { 
    $(daily).hide(); 

    if ($(daily).hasClass('item-0')) { 
     $('.item-1').show(); 
    } 
    if ($(daily).hasClass('item-1')) { 
     $('.item-2').show(); 
    } 
});

来源

2012-04-17 geraddavis

你可以'返回;'从每个'if'语句中的函数，而是整个的做法似乎是错误的路线去。 – 2012-04-17 21:46:55

如果他们是列表元素，那么他们是兄弟姐妹，对吧？只需获取对当前可见元素的引用，隐藏它并显示下一个兄弟。 – 2012-04-17 21:48:13

@FelixKling我也在研究同样的理论。不过，似乎并不是一种简单的方法，可以循环回到第一个元素。 – 2012-04-17 21:53:50

如果他们是列表元素，那么他们是兄弟姐妹，对不对？

您可以获取对当前可见元素的引用，隐藏它并显示下一个兄弟。

假设所有列表元素最初隐藏，只有用类current是可见的元素，那么它会是这样的：

var $daily = $('.daily_goal_activity li'); 
$daily.first().addClass('current'); 

$('#activity_toggle').click(function() { 
    $daily.filter('.current') 
     .removeClass('current') 
     .next('li').addClass('current'); 
});

如果你想通过元素周期，你可以检查是否居然还有下一个兄弟，如果没有，再回到第一个：

var $next = $daily.filter('.current') 
    .removeClass('current') 
    .next('li'); 

if($next.length === 0) { 
    $next = $daily.first(); 
} 

$next.addClass('current');

DEMO

来源

2012-04-17 21:54:29

完美的感谢，菲利克斯。我知道我很喜欢围绕一个解决方案跳舞，但是显然已经用我自己的想法跑出来了。 – geraddavis 2012-04-17 22:05:52

@geraddavis：不客气:) – 2012-04-17 22:06:19

一几点。

存储'.daily_goal_activity li'并重新使用它并不能真正为您节省任何东西。你真的想存储选择和重用： var daily = $('.daily_goal_activity li');
.hasClass('item-0')将永远是真实的，因为li S的一个将有类item-0，因为你在.addClass()应用该类。
要使代码以当前形式工作，您需要隐藏x并显示x+1。您可以使用全局变量来跟踪x。
你最好使用HTML的结构下一首/上为你追踪：

var daily = $('.daily_goal_activity li'); 

daily.hide().first().show(); 

$('#activity_toggle').click(function() { 
    var nextdaily = daily.filter(':visible').hide().next(); 
    if(nextdaily.length > 0) { 
     nextdaily.show(); 
    } else { 
     daily.first().show(); 
    } 
});

演示：http://jsfiddle.net/jtbowden/yRFba/

来源

2012-04-17 21:57:13

嗯，也许你正在寻找这样的事情：

var changeClass=function(){ 

    if($('ul li.active').length==0){ 
    $('ul li:first').addClass('active'); 
    } 
else if($('.active').index()==4){ 
    $('.active').removeClass('active') 
    $('ul li:first').addClass('active'); 
} 
else{ 
    $('.active').removeClass('active').next('li').addClass('active') 
    } 

    } 

    $(document).ready(function() { 
    $('.button').click(function(){ 

    changeClass(); 

    }); 
});

来源

2012-04-17 22:03:33

您应该提及您的代码假定有四个列表元素......更好的解决方案不取决于元素的数量。 – 2012-04-17 22:06:03

你是对的菲利克斯我没有提到...你的解决方案更好:) – 2012-04-17 22:13:53

var daily = $('.daily_goal_activity li'); 
daily.addClass(function (index) { return "item-" + index; }).hide(); 
$('.item-0').show(); 

$('#activity_toggle').click(function() { 
    daily_num = daily.filter(':visible').index(); 
    daily.hide().eq(daily_num+1).show(); 
});

FIDDLE

来源

2012-04-17 22:09:44 adeneo

单按钮来切换显示/隐藏

<!DOCTYPE html> 
    <html> 
    <head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $("button").click(function(){ 
     var id=$("button").attr("id"); 
     if(id=="hide") 
     { 
       $("#example").hide(); 
       $(this).html("Show"); 
       $(this).attr({"id":"show"}); 

     } 
     else 
     { 
      $("#example").show(); 
      $(this).html("Hide"); 
      $(this).attr({"id":"hide"}); 
     } 



     }); 
    }); 
    </script> 
    </head> 

    <body> 
    <button id="hide">Hide</button> 
    <p id="example">Hide me out</p> 
    </body> 
    </html>

来源

2012-06-18 13:15:15 Shariq

jQuery一个按钮循环来显示/隐藏兄弟元素

回答

相关问题