jquery hide顯示列表

Question

jquery hide顯示項目很少出現問題。

得到一張圖片列表，想要顯示第一張圖片但隱藏其餘圖片，當用戶點擊下一張圖片時，當前圖片被隱藏，然後顯示下一個列表項目。

一直在撞牆撞牆，可能有一個非常簡單的解決方案，但由於某種原因，我無法看到它。將不勝感激的任何建議。

$(function() { 
    $('#feat>li:gt(0)').hide(); 
    var $links = $('#feat>li'); 
    var $item = $('#feat>li'); 

    $links.click(function() { 
     var $par = $(this); 
     $par.slideUp(700, function() { 
      var index = $links.index($par.get(0)) 
      $item.eq(index).slideDown(700); 
     }); 
    }); 
}); 

    <div id="feature"> 
    <ul id="feat"> 
     <li><img src="images/sample.png" /><a href="#">Next</a></li> 
     <li><img src="images/sample2.jpg" /><a href="#">Next</a></li> 
     <li><img src="images/sample.png" /><a href="#">Next</a></li> 
    </ul> 
</div> 

Answer 1

未經檢驗的，應該工作：

$('#feat li').hide().eq(0).show(); 

// Option 1: Simultaneous slidings: 
$('#feat a').click(function() { 
    $(this).parent().slideUp().next().slideDown(); 
}); 

// Option 2: Hide first, then show: 
$('#feat a').click(function() { 
    $(this).parent().slideUp(700, function() { 
     $(this).next().slideDown(); 
    }) 
});