Question

我正在尝试使用一个按钮以循环方式显示/隐藏元素的无序列表。页面加载，第一个元素显示，单击按钮，显示的元素被隐藏，下一个显示...有点像在幻灯片中点击下一步。问题是我不知道如何在第一个if语句后停止或重置click函数。触发功能现在可以全部通过它们。有人可以看看我的代码，请帮我一把吗？

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();
    }
});

Answer 1

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

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

假设所有列表元素最初都是隐藏的，只有类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

Answer 2

几点。

存储'.daily_goal_activity li'并重复使用它并不能真正为您节省任何费用。你真的想存储选择器并重用它： var daily = $('.daily_goal_activity li');
.hasClass('item-0')将永远为真，因为当您在li中应用该类时，其中一个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/

Answer 3

好吧，也许你看起来像这样：

Fiddle here

   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();

     });
 });

Answer 4

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

Answer 5

单击按钮切换隐藏/显示

  <!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>

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

5 个答案: