0

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

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

5 回答 5

2

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

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

假设所有列表元素最初都是隐藏的，并且只有具有该类的元素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');

演示

于 2012-04-17T21:54:29.490 回答
1

几点。

  1. 存储'.daily_goal_activity li'和重复使用它并不能真正为您节省任何东西。您真的想存储选择器并重用它： var daily = $('.daily_goal_activity li');
  2. .hasClass('item-0')将永远是正确的，因为其中一个lis 将具有 class item-0，因为您在.addClass().
  3. 为了使您的代码以其当前形式工作，您需要隐藏x和显示x+1. 您可以使用全局 var 来跟踪x.
  4. 您最好使用 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-17T21:57:13.673 回答
0

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

在这里提琴

   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-17T22:03:33.660 回答
0 
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();
});​

小提琴

于 2012-04-17T22:09:44.287 回答
0

单键切换隐藏/显示

  <!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-18T13:15:15.493 回答