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

Answer 2

您可以使用.on（） - http://api.jquery.com/on/

然后像：

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

（浏览器中的F12检查控制台顺便说一下）

Answer 3

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

$('.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/

Answer 4

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

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

}

Answer 5

不，让它变得动态。

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

而不是

$（ '＃PROJECT1'）淡入（ '快'）;

像

这样的东西

$（ '的div [ID ^ = “项目”]'）淡入（ '快'）;

或

$（ “[ID ^ =项目]”）淡入（ '快'）;

应选择id以“project”

开头的所有div

你可以在课堂上做同样的事情：

$（ “[^类项目=]”）

需要帮助jQuery组合脚本

5 个答案: