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一個按鈕循環來顯示/隱藏兄弟元素

回答

相關問題