如何让我的jQuery幻灯片显示工作？

Question

我希望有一个显示项目列表的视觉组合。单击项目标题时，会同时显示大图像（下面代码中的imgdefault），缩略图（缩略图）和描述（描述）。

PHP生成的代码

<section id="slide">
    <ul id="imgdefaut">
        <li><img src="GdeImg0.jpg" /><img src="GdeImg1.jpg" /></li>
        <li><img src="GdeImg2.jpg" /><img src="GdeImg3.jpg" /></li>
    </ul>
    <ul id="miniatures">
        <li><img src="miniaturesImg0.jpg" /><img src="miniaturesImg1.jpg" /></li>
        <li><img src="miniaturesImg2.jpg" /><img src="miniaturesImg3.jpg" /></li>       
    </ul>
    <ul id="description">
        <li>Description Images 0</li>
        <li>Description Images 1</li>   
    </ul>
</section>

在jQuery中，我的函数的开头有效，但我使用了.eq()和.index()。

我的jQuery

$(document).ready(function(){

    $("#listeProjet ul li").click(function () {
         $("#imgdefaut > li:not(li:nth-child(1)) > img").css({'visibility':'hidden'});
         $("#miniatures > li:not(li:nth-child(1))").css({'visibility':'hidden'});
         $("#description > li:not(li:nth-child(1))").css({'visibility':'hidden'});              
    },function(){
         $("#imgdefaut > li:not(li:nth-child("+ $(this).index().next("li") +")) > img").css({'visibility':'visible'});
         $("#miniatures > li:not(li:nth-child("+ $(this).index().next("li") +"))").css({'visibility':'visible'});
         $("#description > li:not(li:nth-child("+ $(this).index().next("li") +"))").css({'visibility':'visible'});                            
    });           
});

没有结果。任何人都可以帮助我吗？

Answer 1

正如您对问题的评论中所述，您的nth-child查询错误，并且不会生成正确的索引编号（如果您检查javascript控制台，您会在jQuery的选择器中看到错误）。

你最好的选择是做这样的事情：

$(document).ready(function() {
   // Initially hide all elements except the first of each <ul>
   $('#slide li:not(:first-child)').css({'visibility': 'hidden'});

   // Create click event for selector (in this case a simple <ul>).
   $('#selector li').click(function() {
      // Hide all elements
      $('#slide li').css({'visibility': 'hidden'});
      // Store the index of the current element
      var index = $(this).index();
      // For each <ul>, make the i-th element visible.
      $('#slide ul').each(function() {
         $(this).children('li:eq(' + index + ')').css({'visibility': 'visible'});
      });
   });
});

这是JSFiddle that implements the solution。