Коммутатор для миниатюр не работает

Question

Мне нужна помощь, чтобы исправить мой Switcher для миниатюр. Я не понимаю, почему код не работает. Ниже код html и jQuery.

$(function(){ 
    $(".current-photo-product img:eq(0)").nextAll().hide(); 

    $(".choice-photo ul li img").click(function(e){ 
     var index = $(this).index(); 
     $(".current-photo-product img").eq(index).show().siblings().hide(); 
    }); 
}); 

<div class="product-preview"> 
     <div class="current-photo-product"> 
      <img src="img/product-photo1.png" alt="photo1"> 
      <img src="img/product-photo2.png" alt="photo2"> 
      <img src="img/product-photo3.png" alt="photo3"> 
      <img src="img/product-photo4.png" alt="photo4"> 
     </div> 
     <div class="choice-photo"> 
      <ul> 
       <li><img src="img/product-photo1.png" alt="photo1"></li> 
       <li><img src="img/product-photo2.png" alt="photo2"></li> 
       <li><img src="img/product-photo3.png" alt="photo3"></li> 
       <li><img src="img/product-photo4.png" alt="photo4"></li> 
      </ul> 
     </div> 
</div> 

Answer 1

Я считаю, что следующий будет работать для вас

$(function(){ 
    $(".current-photo-product img:eq(0)").nextAll().hide(); 

    $(".choice-photo ul li img").click(function(e){ 
     var index = $(this).parent().index(); 
     $(".current-photo-product img").eq(index).show().siblings().hide(); 
    }); 
}); 

Вам нужно сделать индекс на литиево выше IMG тега.