Question

所以我有一个产品页面，对于每一个我想在鼠标悬停时循环浏览一些图像，并让它在mouseout上停止。以下代码是我目前的状态......

最初我让它工作，它检查了一个名为repeatCycle的全局变量，看它是否应该旋转到下一个图像。这导致了问题，因为这个功能的所有实例都在检查＆amp;设置相同的变量。我经常会一次运行多个实例。所以我想为每个实例设置一些东西，但却无法做到。

我也尝试将其作为参数传递给函数，但是当我传入repeatCycle：false时，在mouseout事件中，它只会初始化另一个实例。

有人对如何做到这一点有任何建议吗？

$.fn.image_cycler = function(options){
  // default configuration properties
  var defaults = {
    fade_delay:     150,
    image_duration: 1500,
  };
  var options = $.extend(defaults, options);

  this.each(function(){
    var product     = $(this);
    var image       = $('div.image>a.product_link>img', product);
    var description = $('div.image>div.description', product);
    var all_images  = $('div.all_images', product);
    var next_image  = ($(all_images).find('img[src="' + $(image).attr('src') + '"]').next('img').attr('src')) ? $(all_images).find('img[src="' + $(image).attr('src') + '"]').next('img') : $(all_images).children('img').first();;

    // mouseover
    image.fadeOut(options.fade_delay, function(){
      image.attr('src', next_image.attr('src'));
      image.fadeIn(options.fade_delay);
    });
    if (this.repeatCycle){
      var loop = function() {
        return this.image_cycler(options);
      }
      setTimeout(loop,options.image_duration);
    }
  });
};

$(document).ready(function() {
  $('div.product').hover(function(){
    $(this).image_cycler();
  }, function(){
    $(this).image_cycler.repeatCycle = false;
  });
});

Answer 1

尝试使用jQuery的.data()。例如更换线条之类的东西：

if (this.repeatCycle){ 
....
$(this).image_cycler.repeatCycle = false;

由：

if (product.data('repeatCycle')){
....
$(this).data('repeatCycle', false);

在jquery中访问多个实例

1 个答案: