的.next（）不工作按預期

Question

所以，

if($(this).hasClass('active')){    
    $(this).removeClass('active'); 
    $(this).prev().addClass('active');     
} 

做工精細，它添加了類「活動」這個以前的同類股利。

if($(this).hasClass('active')){ 
    $(this).removeClass('active'); 
    $(this).next().addClass('active'); 
} 

但是，將類添加到下一個div（因爲我打算這樣做）約0.5秒的BUT然後將其刪除。

這裏是所有的的jQuery（按下面的評論） - 請不要對我的可怕的代碼組織

$(window).load(function() { 

    // Initial variables 
    var numberSlides = 0; 
    var currentSlide = 1; 
    var ready = true; 
    var pageWidthR = $(document).width() - 352; 
    var pageWidthL = $(document).width() - 352; 

    // Update number of slides by number of .slide elements 
    $('#features-slider .slide').each(function() { 
     numberSlides++; 
    }); 

    // Go through each slide and move it to the left of the screen 
    var i = 0; 

    $($('#features-slider .slide').get().reverse()).each(function() { 

     if (i == 0) { 

     } else { 
      var newWidth = i * 115; 
      $(this).css('left', '-' + newWidth + '%'); 
     } 

     i++; 

    }); 

    // Animate the first slide in 
    $('#features-slider .slide:last-child').addClass('active').animate({ 
     left: 0 
    }, 1500); 

    // Remove the loading message 
    $('#loading').fadeOut(1000, function() { 
     $('#loading').remove(); 

     // Now that we're done - we can show it 
     $('#features-slider').show(); 
    }); 

    /***** Left and Right buttons *****/ 

    /* Right */ 
    $('#rightbutton').click(function() { 

     var numberSlides = 0; 
     $('#features-slider .slide').each(function() { 
      numberSlides++; 
     }); 

     var index = $('.slide.active').index() + 1; 

     if (!$('.slide').is(':animated') && index != 1) { 

      $('#features-slider .slide').each(function() { 


       if ($(this).hasClass('active')) { 

        var currentLeft = $(this).css('left'); 
        var newLeft = parseInt(currentLeft) + 115; 

       } else { 

        var currentLeft = $(this).css('left'); 
        var newLeft = parseInt(currentLeft) + 115; 

       } 


       $(this).animate({ 
        left: newLeft + '%' 
       }, 1500); 


       if ($(this).hasClass('active')) { 

        $(this).removeClass('active'); 
        $(this).prev().addClass('active'); 

       } 

      }); 

     } 

    }); 

    /* Left */ 
    $('#leftbutton').click(function() { 

     var numberSlides = 0; 
     $('#features-slider .slide').each(function() { 
      numberSlides++; 
     }); 

     var index = $('.slide.active').index() + 1; 
     if (!$('.slide').is(':animated') && index != numberSlides) { 

      $('#features-slider .slide').each(function() { 

       if ($(this).hasClass('active')) { 

        var currentLeft = $(this).css('left'); 
        var newLeft = parseInt(currentLeft) - 115; 

       } else { 

        var currentLeft = $(this).css('left'); 
        var newLeft = parseInt(currentLeft) - 115; 

       } 

       $(this).animate({ 
        left: newLeft + '%' 
       }, 1500); 

       if ($(this).hasClass('active')) { 

        $(this).next().addClass('active'); 
        $(this).removeClass('active').not($(this).next()); 

       } 

      }); 

     } 

    }); 

}); 

$(document).ready(function() { 

    // Hide the slider and show a loading message while we do stuff and the images/DOM loads - Also disable overflow on the body so no horizontal scrollbar is shown 
    $('body').css('overflow-x', 'hidden'); 
    $('#features-slider').hide(); 
    $('#loading').html('<center> <img id="loader" src="/wp-content/themes/responsive/library/images/ajax-loader.gif" /> Loading</center>'); 

}); 

解決的評論

新左鍵功能：

       $('#leftbutton').click(function(){ 

       var numberSlides = 0; 
       $('#features-slider .slide').each(function(){ 
        numberSlides++; 
       }); 

       var index = $('.slide.active').index()+1; 

       if(!$('.slide').is(':animated') && index != numberSlides ){ 

        var done = false;    

        $('#features-slider .slide').each(function(){ 

         if($(this).hasClass('active')){ 

          var currentLeft = $(this).css('left'); 
          var newLeft = parseInt(currentLeft)-115; 

         } else { 

          var currentLeft = $(this).css('left'); 
          var newLeft = parseInt(currentLeft)-115; 

         } 

        $(this).animate({left: newLeft+'%'}, 1500); 

        if($(this).hasClass('active') && done == false){ 

          $(this).next().addClass('active'); 
          $(this).removeClass('active'); 
          done = true; 

        } 

      }); 

      }); 

Answer 1

如果您正在迭代元素，那麼應該清楚發生了什麼 - 您將「活動」類添加到下一個元素，然後下一個迭代將它帶走。

這只是一個猜測，但是因爲您沒有爲我（或任何其他人）發佈足夠的代碼以確保。現在你已經更新了問題

編輯 — OK，很明顯的是，猜測是正確的。 .each()函數將遍歷元素。當一個元素具有「活動」類，並且代碼將其移除並將其添加到下一個元素時，那麼在下一次迭代中，工作就會被撤消。

Answer 2

由於您引用了this，並且您所描述的行爲，您可能會爲元素列表迭代循環。因此，您正在完成您想要的操作，但下一次迭代將刪除以前的更改，這是因爲您使用了刪除類，然後再添加該類。

現在，您的代碼並未說明如何發生這種情況。

更新： 懷疑，你似乎循環爲：each(function(){。在迭代你的對象的時候，這個類正在向前推進，而不是按照需要行事。您在聲明將該類添加到下一個元素，但將其從當前元素中移除，並且此行爲會在迭代中繼續。

在一個側面說明，更新您的代碼來調用removeClass()當前對象先上，將它添加到下一個對象之前：

if ($(this).hasClass('active')) { 
    $(this).removeClass('active').next().addClass('active'); 
}