1

I want to have a visual portfolio displaying a list of projects. When a project's title is clicked, a large image (imgdefault in the code below), miniature image (miniatures) and description (description) are displayed at the same time.

The code generated by 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>

In jQuery, the beginning of my function works but I used .eq() and .index().

My 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'});                            
    });           
});

With no results. Can anyone help me?

4

1 回答 1

2

正如对您的问题的评论中所述，您的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。

于 2013-06-25T00:08:48.613 回答