Question

我试图利用一个纽子,通过一个无顺序的分子清单,以假装的方式展示/杀害。显示第1个元件,点击纽顿,显示的元件是隐蔽的,下一个元件显示......在滑坡how下点击。问题在于,如果发言,我不知道如何在第一次发言之后停止或重新启动点击功能。现在,错开这一职能就贯穿了它们。谁能看我的法典,给我一手?

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

如果它们是清单内容,那么它们是兄弟姐妹,是正确的?

你只能提到目前显而易见的内容,隐藏着这个内容,并展示下一个兄弟情谊。

假设所有清单内容最初都是隐蔽的,只有“<现值<<>>>>/代码”的元件即可识别,因此,情况如下:

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

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

If you want to cycle through the elements, you can check whether there actually is a next sibling and if not, go back to the first one:

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

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

$next.addClass( current );

rel=“nofollow”>DEMO

Answer 2

几个要点。

Storing .daily_goal_activity li and reusing it doesn t really save you anything. You really want to store the selector and reuse that: var daily = $( .daily_goal_activity li );
.hasClass( item-0 ) will always be true, because one of the lis will have the class item-0, as you applied that class in .addClass().
To make your code work in its current form, you want to hide x and show x+1. You could use a global var to track x.
You are better off using the structure of the html to track next/previous for you:

。

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

Demo: http://jsfiddle.net/jtbowden/yRFba/。

Answer 3

也许你正在研究这样的问题:

http://jsfiddle.net/3pkum/"rel=“nofollow”> 页: 1

   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>

友情链接