0

ページに以下のコードがあります。次の画像クリックは実行できますが、前の画像クリックは機能しません。「次へ」をクリックすると、div1 - div2 - div3 が表示されますが、前へのクリックでは何も表示されません。

私のHTML：

<div id="slideshow">
    <img.prev>
    <img.next>
    <div1>
    <div2>
    <div3>
</div>

$("#slideshow > div:gt(0)").hide();

// this works fine
$('.next').live('click', function() {
    $('#slideshow > div:first')
        .fadeOut(0)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}) ;

// this is not working
$('.prev').live('click',function(){
    $('#slideshow > div:first')
        .fadeOut(0)
        .prev()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
});
4

2 に答える 2

0

あなたのコードが何をしているかについて感謝します。最初の例では、次のことが起こります。

$('.next').live('click',function(){
  $('#slideshow > div:first')   //get first div, div1, in slideshow
 .fadeOut(0)                    //fade div1 out
 .next()                        //get the next div, div2
 .fadeIn(1000)                  //fade div2 in
 .end()                         //end
 .appendTo('#slideshow');       //append the original div, div1, to the end of the show
}) ;

これに関する問題は、スライドショーに常に画像を追加していることです。これにより、非常に多くの DOM 要素が生成されます。まったく追加したくないと思います。

それにもかかわらず、コードは2番目のケースでは機能しません...

$('.prev').live('click',function(){
 $('#slideshow > div:first')    //get first div, div1
 .fadeOut(0)                    //fade it out
 .prev()                        //previous is nothing because you already have the first one! This is no doubt why it breaks
 .fadeIn(1000)
 .end()
 .appendTo('#slideshow');       //again you are appending. Seems like a bad idea
}) ;

これを行う場合は、代わりにクラスを使用します。テストされていませんが、次のようになります。

<div id="slideshow">
    <img.prev>
    <img.next>
    <div1 class="active">
    <div2>
    <div3>
</div>

$('.next').live('click',function(){
  $('#slideshow > div.active')  //get active div
  .fadeOut(0)                    //fade out
  .removeClass('active')
  .next()                        //get the next div
  .fadeIn(1000)                  //fade it in
  .addClass('active');           //make new div the active one
}) ;

$('.next').live('click',function(){
  $('#slideshow > div.active')  //get active div
  .fadeOut(0)                    //fade out
  .removeClass('active')
  .prev()                        //get the prev div
  .fadeIn(1000)                  //fade it in
  .addClass('active');           //make new div the active one
}) ;
于 2013-01-15T15:21:03.937 に答える
0

.prev最初の要素は定義により前の兄弟を持つことができないため、機能していません。 .next最初の子には常に 3 つの要素があるため、機能します。期待どおりに最初の div を最後に移動し続けるため、循環しているように見えます。が機能するには.prev、最後の要素を選択して先頭に追加する必要があります。

$("#slideshow > div:first").hide();
$("#slideshow > div:last").prependTo("#slideshow").fadeIn(1000);
于 2013-01-15T15:25:39.787 に答える