2

我正在为我的网站创建一个投资组合页面。我想在我的网站上展示我的作品，所以我有这个想法。

我将展示我所有的作品，比如 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 等，？

我有什么简单的方法可以做到这一点吗？我的意思是在不重复相同代码的情况下询问我是否有办法实现上述方法？

任何帮助表示赞赏。干杯!

4

5 回答 5

1

将项目的索引存储在缩略图的某处。无论是在数据中，还是在 ID 中。演示

<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');
});
于 2012-12-06T21:58:14.973 回答
0

您可以使用 .on() - http://api.jquery.com/on/

然后是这样的：

$(".project_container").on("click", "div", function(){
  console.log('i hit them all!');
});

（在浏览器中按 F12 检查控制台）

于 2012-12-06T21:51:48.343 回答
0

你可以做这样的事情 - 假设你的结构和你的例子完全一样

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

$('.project').click(function(){
    var idx = $(this).index(); // get index of clicked project - assuming they are in the same order
   $('.project').fadeOut('fast', function(){      
     $('.project_description').eq(idx).fadeIn('fast'); // fadein only the clicked project
   });
});

$('.close').click(function(){
    $('.project_description:visible').hide(); // hide all visible description
    $('.project').fadeIn('fast');
});​

http://jsfiddle.net/ePbaL/

于 2012-12-06T22:08:05.997 回答
-1

您可以使用循环将事件绑定到所有“项目”：

for (i = 1; i <= projectsNum; i++) {

$('.proj' + i).click(function(){
   $('.project').fadeOut('fast', function(){
     $('#project' + i).fadeIn('fast');
   });
});

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

}
于 2012-12-06T21:50:26.310 回答
-1

不，让它动态。

例如，通过使用带有 LIKE 的选择器：

代替

$('#project1').fadeIn('fast');

放一些类似的东西

$('div[id^="project"]').fadeIn('fast');

或者

$("[id^=project]").fadeIn('fast');

应该选择 id 以“project”开头的所有 div

你可以为类做同样的事情：

$("[类^=项目]")

于 2012-12-06T21:51:34.997 回答