Напишите код jquery короче

Question

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

У меня было это работает, но мой код получил verrrrry long, поэтому моя цель - написать мой код намного короче. Я пытаюсь получить ПРЕД и следующих элементов массива, который я нашел в этом вопросе: get prev and next items in array

Здесь у меня есть моя длинная версия:

var collegaNaamArray = [ 
    "#naam1", 
    "#naam2", 
    "#naam3", 
    "#naam4", 
    "#naam5"]; 

$(collegaNaamArray.join(", ")).hide(); 
$(collegaNaamArray[0]).show(); 

$(collegaNaamArray[0]).animate({ 
    opacity: 0 
}, 0); 
$(collegaNaamArray[0]).animate({ 
    opacity: 1 
}, 'slow'); 

$('#collega1').on('click', function (e) { 
    e.preventDefault(); 
    $(collegaNaamArray.join(", ")).hide(); 
    $(collegaNaamArray[0]).show(); 

    $(collegaNaamArray[0]).animate({ 
     opacity: 0 
    }, 0); 
    $(collegaNaamArray[0]).animate({ 
     opacity: 1 
    }, 'slow'); 
}); 

$('#collega2').on('click', function (e) { 
    e.preventDefault(); 
    $(collegaNaamArray.join(", ")).hide(); 
    $(collegaNaamArray[1]).show(); 

    $(collegaNaamArray[1]).animate({ 
     opacity: 0 
    }, 0); 
    $(collegaNaamArray[1]).animate({ 
     opacity: 1 
    }, 'slow'); 
}); 

$('#collega3').on('click', function (e) { 
    e.preventDefault(); 
    $(collegaNaamArray.join(", ")).hide(); 
    $(collegaNaamArray[2]).show(); 

    $(collegaNaamArray[2]).animate({ 
     opacity: 0 
    }, 0); 
    $(collegaNaamArray[2]).animate({ 
     opacity: 1 
    }, 'slow'); 
}); 

$('#collega4').on('click', function (e) { 
    e.preventDefault(); 
    $(collegaNaamArray.join(", ")).hide(); 
    $(collegaNaamArray[3]).show(); 

    $(collegaNaamArray[3]).animate({ 
     opacity: 0 
    }, 0); 
    $(collegaNaamArray[3]).animate({ 
     opacity: 1 
    }, 'slow'); 
}); 

$('#collega5').on('click', function (e) { 
    e.preventDefault(); 
    $(collegaNaamArray.join(", ")).hide(); 
    $(collegaNaamArray[4]).show(); 

    $(collegaNaamArray[4]).animate({ 
     opacity: 0 
    }, 0); 
    $(collegaNaamArray[4]).animate({ 
     opacity: 1 
    }, 'slow'); 
}); 

http://jsfiddle.net/sxypckn6/1/

$('#collega1').on('click', function(e) { 
    e.preventDefault(); 
    $(collegaNaamArray.join(", ")).hide(); 
    $(collegaNaamArray[0]).show(); 

    $(collegaNaamArray[0]).animate({ opacity: 0 }, 0); 
    $(collegaNaamArray[0]).animate({ opacity: 1 }, 'slow'); 
}); 

И здесь моя короткая версия, которая, к сожалению, еще не работает:

var collegaNaamArray = [ 
    "#naam1", 
    "#naam2", 
    "#naam3", 
    "#naam4", 
    "#naam5"]; 

$(collegaNaamArray.join(", ")).hide(); 
$(collegaNaamArray[0]).show(); 

$(collegaNaamArray[0]).animate({ 
    opacity: 0 
}, 0); 
$(collegaNaamArray[0]).animate({ 
    opacity: 1 
}, 'slow'); 

$(".collegafoto").each(function() { 
    var start = '#naam1'; 
    var prevInfo = collegaNaamArray[($.inArray(start, collegaNaamArray) - 1 + collegaNaamArray.length) % collegaNaamArray.length]; 
    var nextInfo = collegaNaamArray[($.inArray(start, collegaNaamArray) + 1) % collegaNaamArray.length]; 

    var prevFoto = $(this).prev(); 
    var nextFoto = $(this).next(); 

    $(prevFoto).on('click', function() { 
     $(collegaNaamArray.join(", ")).hide(); 
     $(prevInfo).show(); 
     $(prevInfo).animate({ 
      opacity: 0 
     }, 0); 
     $(prevInfo).animate({ 
      opacity: 1 
     }, 'slow'); 
    }); 
    $(nextFoto).on('click', function() { 
     $(collegaNaamArray.join(", ")).hide(); 
     $(nextInfo).show(); 
     $(nextInfo).animate({ 
      opacity: 0 
     }, 0); 
     $(nextInfo).animate({ 
      opacity: 1 
     }, 'slow'); 
    }); 
}); 

http://jsfiddle.net/sxypckn6/

Я предполагаю, что проблема находится где-то в этой части:

var prevFoto = $(this).prev(); 
var nextFoto = $(this).next(); 

Я знаю, что я не выбрать предыдущую и следующую картину в правильном направлении, но я не знаю, как еще Я должен сделать это.

спасибо, что заблаговременно!

Answer 1

Я упростил вашу реализацию в очень простой функции. Фактически, все, что вам нужно, это определить индекс щелкнутого изображения, чтобы диктовать имена (также основанные на индексе), которые вы хотите показать. Конечно, если порядок отличается, вы можете указать цель, используя атрибуты HTML5 data- вместо того, чтобы полагаться на индекс. Кроме того, вы можете воспользоваться нативных функций fadeIn() анимировать непрозрачность и выполнять .show() одновременно :)

Для HTML, я бы рекомендовал оборачивать все #naam(n) дивы с общим контейнером, скажем <div class="naam">...</div> так, что index- на основе ориентируется будут работать, а именно:

<div class="naam"> 
    <div id="naam1"> 
     <h1 class="colleganaam">Bas Maassen</h1> 
     <h2 class="collegafunctie">web developer</h2> 
    </div> 
    <!-- more names --> 
</div> 

Тогда для части JQuery, это на самом деле намного проще, чем вы думаете:

// Hide all names, show first one 
$('.naam > div').hide().eq(0).fadeIn(); 

// Bind click event 
$('#carousel .collegafoto').click(function() { 
    // Get the index of the <a> parent, so we know which # 
    var i = $(this).closest('a').index(); 

    // Decide what to do to each name 
    $('.naam > div') 
     .hide()    // Hide unrelated name 
     .eq(i).fadeIn(); // Show related name (based on index) 
}); 

См проверки концепции скрипки здесь : http://jsfiddle.net/teddyrised/sxypckn6/2/

---

Update: Кроме того, вы можете написать все это в функцию. Даже лучше!

// Declare function 
var toggleNames = function(i) { 
    if(!i) i=0; 
    $('.naam > div').hide().eq(i).fadeIn(); 
}; 

// Hide all names, show first one 
toggleNames(0); 

// Bind click event 
$('#carousel .collegafoto').click(function() { 
    toggleNames($(this).closest('a').index()); 
}); 

См: http://jsfiddle.net/teddyrised/sxypckn6/4/

Answer 2

Вы можете попробовать это:

$('.collegafoto').each(function(index, value){ 
    $(this).on('click', function(e){ 
     e.preventDefault(); 
     $(collegaNaamArray.join(", ")).hide(); 
     $(collegaNaamArray[index]).show(); 

     $(collegaNaamArray[index]).animate({ 
     opacity: 0 
     }, 0); 
     $(collegaNaamArray[index]).animate({ 
     opacity: 1 
     }, 'slow'); 
    }); 
}); 

DEMO

Answer 3

Это был абсолютный маленький я мог бы получить его:

$("#naam1").fadeIn();  
$('.collegafoto').click(function(e) { 
    e.preventDefault();   
    $('div[id^="naam"]').hide(); 
    $("#naam" + this.id.substr(this.id.length - 1)).fadeIn(); 
}); 

Working JSFiddle demo