[英]How to create simple slider according to ul li index values?
I am trying to match two index
values between slider big images and it's thumbs. 我正在尝试在滑块大图像和大拇指之间匹配两个
index
值。 When one the thumbs clicked, i am getting index()
value of it and try to match with another list to show that image. 当一个拇指单击时,我正在获取它的
index()
值,并尝试与另一个列表匹配以显示该图像。
Here is jsFiddle example. 这是jsFiddle示例。
jQuery: 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);
});
Note: I can do this with id/class logic but need to solve it with this way. 注意: 我可以使用id / class逻辑来做到这一点,但需要通过这种方式解决。
I'd go with something like this if I had to do it : 如果必须这样做,我会选择这样的方法:
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);
}
});
});
Anyway, if you wanna keep the logic of your code, the problem is about the function index() on your last line, it returns the index of a jQuery object, but not the jQuery object of a given index. 无论如何,如果您想保留代码的逻辑,问题就出在最后一行的函数index()上,它返回的是jQuery对象的索引,而不是给定索引的jQuery对象。
According to the jQuery API the complementary function of index() is get() but it only returns the DOM Element, hence you can call fadeIn() to it. 根据jQuery API,index()的互补功能是get(),但它仅返回DOM元素,因此您可以对其调用fadeIn()。
What you need to do is to get the jQuery object through eq() method : 您需要做的是通过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.