Упростите функцию 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

По сути, вам нужно придать вашему 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 2

Вот быстрый укол: http://jsfiddle.net/Jj2Q7/1/

Анимации не совсем такие, как у вас, и я сомневаюсь, что это самый эффективный способ сделать это, но, надеюсь, это послужитотправная точка.

Обновление

Вот еще одна версия, которая свободно использует атрибуты данных: http://jsfiddle.net/Jj2Q7/3/

Она должна быть быстрее предыдущей, но опирается на HTML-теги, имеющие правонабор атрибутов.

Answer 3

Во-первых, вы, вероятно, должны использовать общий класс 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"/>

Просто действительногрубая идея.