简化多个元素的 jQuery 函数

Question

我正在研究我的新产品组合，并且有一个使用show和hide函数的项目列表。就我而言，我为每个项目编写代码，但这是非常重复的。因此，我想知道是否有一种为每个项目编写相同功能的技术。

这是我的jQuery代码：

$project1.hide();
$("a.show_hide_project1").show();
$('a.show_hide_project1').click(function() {
    $project1.delay(100).slideToggle("slow");
    $project2.hide(); $project3.hide(); $project4.hide(); $project5.hide();
    $project6.hide(); $project7.hide(); $project8.hide(); $project9.hide();
    $project10.hide();$project11.hide(); $project12.hide();
});

$('a.next1').click(function() {
    $project2.fadeToggle("slow");
    $project1.delay(600).hide();
});

$project2.hide();
$("a.show_hide_project2").show();
$('a.show_hide_project2').click(function() {
    $project2.delay(100).slideFadeToggle("slow");
    $project1.hide(); $project3.hide(); $project4.hide(); $project5.hide();
    $project6.hide(); $project7.hide(); $project8.hide(); $project9.hide();
    $project10.hide();$project11.hide(); $project12.hide();
});

$('a.next2').click(function() {
    $project3.fadeToggle("slow");
    $project2.hide();
});
$('a.previous2').click(function(){
$project1.fadeToggle();
$project2.hide();
});

$project3.hide();
$("a.show_hide_project3").show();
$('a.show_hide_project3').click(function() {
    $project3.delay(100).slideFadeToggle("slow");
    $project2.hide(); $project1.hide(); $project4.hide(); $project5.hide();
    $project6.hide(); $project7.hide(); $project8.hide(); $project9.hide();
    $project10.hide();$project11.hide(); $project12.hide();
});

$('a.next3').click(function(){
    $project4.fadeToggle("slow");
    $project3.hide();
});
$('a.previous3').click(function() {
    $project2.fadeToggle();
    $project3.hide();
});

任何帮助将不胜感激。 提前致谢。

Answer 1

这是一个快速介绍： http://jsfiddle.net/Jj2Q7/1/

动画是不完全像你所拥有的那样，我怀疑这是否是最有效的方法，但希望它能作为一个起点。

更新

这是另一个自由使用数据属性的版本： http://jsfiddle.net/Jj2Q7/3/

它应该比以前更快，但依赖于具有正确属性集的 HTML 标记。

Answer 2

首先，您可能应该利用一个通用的 css 类来选择所有这些

$('.projectItem').click(function () {
    $('.projectItem').hide(); //hide them all
    $(this).delay(100).slideFadeToggle("slow"); //then show the one being clicked.
 });

，您的 Html 看起来更像这样。

<div class="projectItem" id="project1"/>
<div class="projectItem" id="project2"/>
<div class="projectItem" id="project3"/>
<div class="projectItem" id="project4"/>

只是一个非常粗略的想法。

Answer 3

基本上，您需要为您的 HTML 提供一种类，使其可识别为“项目”，并向各个项目添加一些 rel 或 data 属性
然后您的代码将转换为如下内容：（取决于您的 HTML，可能会有所不同）

$(function(){
    $(".project").hide();
    $("a.show_hide_project").show();

    $('a.show_hide_project').click(function(){
         $(".project").hide();
         $(".project[rel="+$(this).attr('rel')+"]").delay(100).slideFadeToggle("slow");

    });  
});