0

eq（）を使用してfadeIn（）およびfadeOut（）したいリスト項目のグループがあります。私も投稿に問題がありますので、コードがひどい場合は申し訳ありません!

<ul id="skater_mulitivew">
  <li class="first_gallery"></li>
  <li class="second_gallery"></li>
  <li class="third_gallery"></li>
  <li class="fourth_gallery"></li>
</ul>

と私の jQuery/JS :

<script>
    $('.right_trigger').click(function(event) { 
      var i=0;
      event.preventDefault();
       while (i<5) { 
         $('#skater_mulitivew li').eq(0).fadeOut('slow');
         $('#skater_mulitivew li').eq(1).fadeOut('slow');
         i++;
       };
     });
</script>

1 回実行されますが、.right_trigger アイテムを再度クリックしても実行されません。クリックするたびに各リスト項目を循環させたい。ご意見ありがとうございます。

4

4 に答える 4

1

1 0すでにフェードアウトしているため、間違いなく一度は機能します

<script>
    var i=0;

    $('.right_trigger').click(function(event) { 
      event.preventDefault();
       while (i<5) { 
         var next = i + 1;
         $('#skater_mulitivew li').eq(i).fadeOut('slow');
         $('#skater_mulitivew li').eq(next).fadeOut('slow');
         i = i + 2;
       }
     });
</script>

また、htmlでこれを修正する必要があり<ul id="#skater_mulitivew">ます<ul id="skater_mulitivew">

フィドル

于 2013-07-25T22:20:23.327 に答える
1

現在のコードの問題

iにはグローバル スコープがあるため、次にループが反復しようとするときi= 5 となり、ループが反復されなくなります。for の宣言をi無名関数に移動します。

$('.right_trigger').click(function(event) { 
var i=0;
  event.preventDefault();
   while (i<5) { 
     $('#skater_mulitivew li').eq(0).fadeOut('slow');
     $('#skater_mulitivew li').eq(1).fadeOut('slow');
     i++;
   });
 });

現在のコードの最適化

fadeOut()ちなみに、関数を 5xと呼ぶ理由がわかりません。次の方法で同じ効果を得ることができます。

$('.right_trigger').click(function(event) { 
     event.preventDefault();
     //If your trying to fadeout all li use the proceeding commented code
     //$('#skater_mulitivew li").fadeOut("slow");

     //If your actually trying to target by index use the proceeding code
     $('#skater_mulitivew li:eq(0),#skater_mulitivew li:eq(1) ').fadeOut('slow');
     i++;
 });

カルーセルの実装

コメントを考えると、カルーセルのような機能を作りたいようです。これを実現するための html、css、javascript を次に示します。

HTML

<ul id="skater_mulitivew">
  <li class="first_gallery">Gallery 1</li>
  <li class="second_gallery">Gallery 2</li>
  <li class="third_gallery">Gallery 3</li>
  <li class="fourth_gallery">Gallery 4</li>
</ul>
<div class="right_trigger">Trigger</div>

CSS

#skater_mulitivew li{
    display:none;
}

#skater_mulitivew li:first-child{
    display: block;
}

Javascript

   $('.right_trigger').click(function(event) { 
      var items = $("#skater_mulitivew li");
      toggle(items,0);
   });

function toggle(items, index){

        items.eq(index).fadeOut('slow', function(){
               index = (index == items.length -1) ? -1:index;
               items.eq(index + 1).fadeIn('slow', function(){

               toggle(items, ++index); 
            });   
        });
}

作業例: http://jsfiddle.net/njxnN/1/

于 2013-07-25T22:18:08.167 に答える
0

あなたのスクリプトは、while ループで行うべきだと思っていることを行っていないと思いますが、主な問題は実際には構文エラーです。

<ul id="#skater_mulitivew">

する必要があります

<ul id="skater_mulitivew">

余分なハッシュに注意してください。

       });
 });

する必要があります

       }
 });

不要な括弧とセミコロンに注意してください。

これら 2 つのエラーを修正すると、最初の 2 つのli項目をクリックするとフェードアウトします。

于 2013-07-25T22:27:54.600 に答える