jquery - 需要 jQuery 投资组合脚本的帮助

Question

我正在为我的网站创建一个作品集页面。我想在我的网站上展示我的作品，所以我就有了这个想法。

我将把我所有的作品展示为图片，比如10张图片。如果任何人单击特定的缩略图，所有缩略图都会淡出，并且有关作品或项目的详细信息将显示在页面上。现在他们可以点击“关闭”，这样当前的工作就会消失，所有的缩略图都会重新出现。

我使用以下方法实现了这一目标:

HTML 代码如下所示

<div class="container project_container">
    <div class="four columns project proj1">
        <img src="http://placehold.it/220x220" /></li>
    </div><!-- End three columns -->

    <div class="four columns project proj2">
        <img src="http://placehold.it/220x220" /></li>
    </div><!-- End three columns -->

    <div class="four columns project proj3">
        <img src="http://placehold.it/220x220" /></li>
    </div><!-- End three columns -->

    <div class="four columns project proj4">
        <img src="http://placehold.it/220x220" /></li>
    </div><!-- End three columns -->
</div><!-- End Container -->

<!-- Project 1 to be displayed when all thumbnails are hidden -->
<div id="project1" class="container project_description">
    <div class="eight columns project_image">
        <p>This is an eight column text for image</p>
    </div><!-- End Eight Columns -->

    <div class="eight columns project_details">
        <p>This is an eight column text</p>
        <a href="#" class="close">Close</a>
    </div><!-- End Eight Columns -->
</div><!-- End Container project description -->

jQuery 代码如下所示:

$('.project_description').hide();

$('.proj1').click(function(){
   $('.project').fadeOut('fast', function(){
     $('#project1').fadeIn('fast');
   });
});

$('.close').click(function(){
    $('#project1').hide();
    $('.project').fadeIn('fast');
});

我现在的问题是，假设我有 20 个项目要放在我的网站上，或者如果我稍后添加它们怎么办？我需要像这样在我的 custom.js 文件中继续添加代码吗？

$('.proj2').click(function(){
   $('.project').fadeOut('fast', function(){
     $('#project2').fadeIn('fast');
   });
});

$('.close').click(function(){
    $('#project2').hide();
    $('.project').fadeIn('fast');
});

依此类推，将 proj2 更改为 proj3,4,5,6..... 并将 project2 更改为 3,4,5 等，？

我有什么简单的方法可以实现这一点吗？我的意思是问，在不重复相同代码并进行微小更改的情况下，我有办法实现上述方法吗？

感谢任何帮助。干杯!

Answer 1

将项目索引存储在缩略图上的某个位置。要么在数据中，要么在 ID 中。 Demo

<div class="four columns project proj1" data-projectindex="1">

用css隐藏描述，而不是js

.project_description {
    display: none;
}

然后创建一个处理任何项目的单击处理程序。

$('.project').click(function(){
    var index = $(this).data('projectindex');
    $('.project').fadeOut('fast', function(){
        $('#project' + index).fadeIn('fast');
    });
});

同时概括关闭按钮

$('.close').click(function(){
    $('.project_description').hide();
    $('.project').fadeIn('fast');
});