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

首先，你应该利用一个普通的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 2

基本上，您需要为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");

    });  
});

Answer 3

以下是对它的快速抨击：http://jsfiddle.net/Jj2Q7/1/

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

更新

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

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

简化多个元素的jQuery函数

3 个答案:

更新