Jquery 在每个循环的 for 循环中使用 $this
Posted
技术标签:
【中文标题】Jquery 在每个循环的 for 循环中使用 $this【英文标题】:Jquery using $this in a for loop in an each loop 【发布时间】:2017-02-08 20:20:27 【问题描述】:这是我的基本 jquery 图像滑块代码。问题是我想在一页上有很多滑块,每个滑块都有不同数量的图像。每个滑块都有 .portfolio-img-container 类和每个图像 .portfolio-img。
基本的html设置如下:
<div class="portfolio-item"><div class="portfolio-img-container"><img class="portfolio-img"><img class="portfolio-img"></div></div>
<div class="portfolio-item"><div class="portfolio-img-container"><img class="portfolio-img"><img class="portfolio-img"></div></div>
还有 javascript:
$.each($('.portfolio-img-container'), function()
var currentIndex = 0,
images = $(this).children('.portfolio-img'),
imageAmt = images.length;
function cycleImages()
var image = $(this).children('.portfolio-img').eq(currentIndex);
images.hide();
image.css('display','block');
images.click( function()
currentIndex += 1;
if ( currentIndex > imageAmt -1 )
currentIndex = 0;
cycleImages();
);
);
我的问题出现在函数 cycleImages() 中。我在单击任何图像时调用此函数。但是,它不起作用:图像被隐藏,但“显示:块”并未应用于任何图像。我通过使用 devtools 推断出我的问题在于 $(this)。变量图像不断出现未定义。如果我将 $(this) 更改为简单的 $('.portfolio-img'),它会选择每个 .portfolio-img-container 中的每个 .portfolio-img,这不是我想要的。谁能建议一种仅选择当前 .portfolio-img-container 中的投资组合图像的方法?
谢谢!
【问题讨论】:
您可以使用:cycleImages.call(this);
设置相关上下文,更好的是在cycleImages()
方法中设置有关currentIndex
的逻辑,然后使用:images.click(cycleImages);
绑定它
【参考方案1】:
cycleImages
中的this
是全局对象(我假设您没有使用严格模式),因为您调用它的方式。
最好将this
包装一次,记住它到一个变量中,然后使用它,因为cycleImages
会覆盖它:
$.each($('.portfolio-img-container'), function()
var $this = $(this); // ***
var currentIndex = 0,
images = $this.children('.portfolio-img'), // ***
imageAmt = images.length;
function cycleImages()
var image = $this.children('.portfolio-img').eq(currentIndex); // ***
images.hide();
image.css('display', 'block');
images.click(function()
currentIndex += 1;
if (currentIndex > imageAmt - 1)
currentIndex = 0;
cycleImages();
);
);
旁注:
$.each($('.portfolio-img-container'), function() /* ... */ );
可以更简单地写成:
$('.portfolio-img-container').each(function() /* ... */ );
旁注2:
在 ES2015 及更高版本(您现在可以将其与转译一起使用)中,您可以使用箭头函数,因为箭头函数关闭 this
就像其他函数关闭变量一样。
【讨论】:
【参考方案2】:您不能只在内部函数中引用this
(see this answer 有很多更详细的解释):
var self = this; // put alias of `this` outside function
function cycleImages()
// refer to this alias instead inside the function
var image = $(self).children('.portfolio-img').eq(currentIndex);
images.hide();
image.css('display','block');
【讨论】:
以上是关于Jquery 在每个循环的 for 循环中使用 $this的主要内容,如果未能解决你的问题,请参考以下文章