[英]How to create simple slider according to ul li index values?
我正在尝试在滑块大图像和大拇指之间匹配两个index
值。 当一个拇指单击时,我正在获取它的index()
值,并尝试与另一个列表匹配以显示该图像。
jQuery的:
var thumbs = $('ul.thumbHolder li');
var bigImg = $('ul.imgHolder li');
thumbs.click(function() {
var target = $(this).index();
bigImg.fadeOut(300);
//problem here
bigImg.index(target).fadeIn(300);
});
注意: 我可以使用id / class逻辑来做到这一点,但需要通过这种方式解决。
如果必须这样做,我会选择这样的方法:
var thumbs = $('ul.thumbHolder li');
var bigImg = $('ul.imgHolder li');
thumbs.click(function() {
var target = $(this).index();
bigImg.each(function(){
if($(this).index() != target){
$(this).fadeOut(300);
}else{
$(this).fadeIn(300);
}
});
});
无论如何,如果您想保留代码的逻辑,问题就出在最后一行的函数index()上,它返回的是jQuery对象的索引,而不是给定索引的jQuery对象。
根据jQuery API,index()的互补功能是get(),但它仅返回DOM元素,因此您可以对其调用fadeIn()。
您需要做的是通过eq()方法获取jQuery对象:
var thumbs = $('ul.thumbHolder li');
var bigImg = $('ul.imgHolder li');
thumbs.click(function() {
var target = $(this).index();
bigImg.fadeOut(300);
bigImg.eq(target).fadeIn(300);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.