0

1 つのボタンを使用して、要素の順不同リストをループ方式で表示/非表示にしようとしています。ページが読み込まれ、最初の要素が表示され、ボタンをクリックすると、表示された要素が非表示になり、次の要素が表示されます...スライドショーで次をクリックするようなものです。問題は、最初の 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')でそのクラスを適用したように、liの 1 つに クラス があるため、 は常に true になります。item-0.addClass()
  3. コードを現在の形式で機能させるには、非表示にして表示する必要がxありますx+1。グローバル変数を使用して追跡できます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

非表示/表示を切り替える単一のボタン

  <!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 に答える
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 に答える