![](/img/trans.png)
[英]jQuery: Accessing an element from an object with multiple instances of a class
[英]accessing multiple instances in jquery
因此,我有一个产品页面,对于每一个产品,我都希望在鼠标悬停时循环浏览某些图像,并在鼠标悬停时停止它。 以下代码是我当前的状态...
最初,我在检查全局变量repeatCycle的地方工作,以查看是否应旋转到下一张图像。 这引起了问题,因为此函数的所有实例都在检查并设置相同的变量。 我经常会同时运行多个实例。 所以我想为每个实例设置一些内容,但无法做到这一点。
我还尝试将其作为函数的参数传递,但是在我在repeatCycle中传递时的mouseout事件上: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;
});
});
尝试使用jQuery的.data()
。 例如替换行:
if (this.repeatCycle){
....
$(this).image_cycler.repeatCycle = false;
通过:
if (product.data('repeatCycle')){
....
$(this).data('repeatCycle', false);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.