對ipad使用多個jQuery循環和touchwipe（刷卡）事件

我已經設置了循環插件在一個頁面上工作多次，這一切都工作正常。我試圖添加一個滑動事件，雖然使用touchwipe插件，它可以在單循環輪播中正常工作，但是我無法讓它在倍數上工作。對ipad使用多個jQuery循環和touchwipe（刷卡）事件

這裏是我的Javsacript，顯示週期代碼，再加上Touchwipe在底部添加上：

function galleries() {  

    var counter = 1 

    $('.gallery .pics').each(function() { 
     $(this).parent().attr('id','slideshow_'+counter); 
     $(this).before('<ul class="next-prev-nav"><li><a href="#" class="prev-'+counter+'">Previous</a></li><li><a href="#" class="next-'+counter+'">Next</a></li></ul><div style="clear:both;"></a>'); 
     $(this).after('<ul class="gallery-nav-'+counter+'">'); 
     $(this).cycle({ 
      fx: 'scrollHorz', 
      speed: '400', 
      timeout: '4000', 
      pager: '.gallery-nav-'+counter, 
      next: '.next-'+counter, 
      prev: '.prev-'+counter, 
      pause: 1, 
      pauseOnPagerHover: true, 
      startingSlide: 0, // zero-based 

      pagerAnchorBuilder: function(id, slide) { 
       var s = $(slide); 
       var imgsource = s.find('img.CycIMG').attr('src'); 

       // Set this as the source for our image 
       return '<li><a href="#"><img src="' + imgsource + '" width="62" alt=""></a></li>'; 
      } 
     }).cycle('pause'); 
     $(this).touchwipe({ 
      wipeLeft: function() { 
       $('.pics').cycle('next');  
      }, 
      wipeRight: function() { 
       $(this).cycle('prev'); 
      } 
     }); 
     counter++; 
    }); 
}

從$開始的代碼行（本）.touchwipe是什麼，我不能去工作。我在這裏展示了兩個不同的例子。「wipeLeft」函數可以工作，但由於它是針對泛型類（'pics'），所以它會一次性掃過所有的輪播。「wipeRight」函數是我希望它能夠使用「this」來只針對循環中的當前循環輪播。我已經嘗試針對我在開始時創建的每個輪播的單個ID，但這似乎不起作用。

真的很感激任何幫助！

來源

2012-07-13 Desmond

下一次，隔離你的問題多一點（而不是包括一切這是工作）。它會幫助你解決問題，它會讓別人更容易幫助你，並且會爲未來的讀者提供更好的資源，但也會帶來同樣的問題:) – 2012-07-16 22:19:46

好的，下次我會做，謝謝凱文！ – Desmond 2012-07-18 05:41:41

嘗試添加上下文選擇你的代碼：

$('.gallery .pics').each(function() { 
    var parent = this.parentNode; 

    /*...*/ 

    $(this).touchWipe({ 
     wipeLeft: function(){ 
      $('.pics', parent).cycle('next'); 
     } 
    }); 
});

這樣做是添加「上下文」你的選擇。它類似於這樣：$(parent).find('.pics')

實際上我工作的確切相同的情況下，你，和我測試過它的工作:)

來源

2012-07-16 22:19:30

感謝凱文，我用不同的方式解決了這個問題，但是你的是更清潔！ – Desmond 2012-07-18 05:21:29

謝謝！其他一些注意事項：$ .each（）有自己的計數器，您不需要自己創建一個計數器（請參閱jQuery文檔）。另外，您可以使用相同的上下文選擇器，如下所示：pager：$（'。pager'，parent） – 2012-07-18 17:16:55

這非常適合用來創建唯一的ID /類知道，我已經更新了！再次感謝您的幫助，非常感謝！ – Desmond 2012-07-31 01:11:43

對ipad使用多個jQuery循環和touchwipe（刷卡）事件

回答

相關問題