Доступ к нескольким экземплярам в jQuery

Question

, поэтому у меня есть страница продуктов, и для каждого из них я хочу перебирать некоторые изображения при наведении курсора мыши и останавливаться на мыши. следующий код - это мое текущее состояние ...

Первоначально у меня было это, где он проверял глобальную переменную, называемую repeatCycle, чтобы увидеть, нужно ли ей поворачиваться на следующее изображение. это вызвало проблемы, потому что все экземпляры этой функции проверяли &, устанавливая ту же переменную. я часто получаю сразу несколько экземпляров. поэтому я хочу что-то установить для каждого экземпляра, но не смог этого сделать.

Я также пробовал передать его в качестве аргумента функции, но в событии mouseout, когда я прошел в repeatCycle: false, он просто инициализирует другой экземпляр.

У кого-нибудь есть предложения относительно того, как это сделать?

$.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's .data(). например что-то вроде замены строки:

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

по:

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