ul li 인덱스 값에 따라 간단한 슬라이더를 만드는 방법은 무엇입니까?

Question

슬라이더 큰 이미지와 엄지 손가락 사이에 두 개의 index 값을 일치 시키려고합니다. 하나가 엄지 손가락을 클릭하면, 나는 그것의 index() 값을 얻고 다른 목록과 일치하는 이미지를 표시하려고합니다.

Here is jsFiddle example.

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); 
});​ 

참고 :I can do this with id/class logic하지만이 방법으로 해결해야합니다. 내가해야 할 일을했을 경우 나는 이런 식으로 뭔가 함께 갈 것

Answer 1

:

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); 
     } 
    });  
});​ 

을 어쨌든, 당신은 당신의 코드의 논리를 유지 싶은 경우는, 문제는 마지막에() 함수 인덱스에 관한 것입니다 라인에서는 jQuery 객체의 인덱스를 반환하지만 주어진 인덱스의 jQuery 객체는 반환하지 않습니다.

jQuery API에 따르면 index()의 보완적인 기능은 get()이지만 DOM 요소 만 반환하므로 fadeIn()을 호출 할 수 있습니다. 좋은 반환

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); 

});​