Более эффективный способ повторить функцию jQuery

Question

У меня есть повторяющаяся функция в моем коде, которая состоит из набора миниатюр, которые при нажатии воспроизводят уникальное видео. Видео находится в div, который переключается. HTML включен для справки:

HTML

<ul class="testimonialthumbs"> 
<li id="t1"><img></li> 
<li id="t2"><img></li>  
<li id="t3"><img></li> 
<li id="t4"><img></li> 
<li id="t5"><img></li> 
</ul> 
<hr> 
<div class="testimonialdrop" id="v1"> 
    <iframe></iframe> 
    <hr> 
</div> 

<div class="testimonialdrop" id="v2"> 
    <iframe></iframe> 
    <hr> 
</div> 

<div class="testimonialdrop" id="v3"> 
    <iframe></iframe> 
    <hr> 
</div> 

<div class="testimonialdrop" id="v4"> 
    <iframe></iframe> 
    <hr> 
</div> 

<div class="testimonialdrop" id="v5"> 
    <iframe></iframe> 
    <hr> 
</div> 

JS

$('#t1').click(function(){ 
    $('#v1').slideToggle('fast'); 
    $('#v2,#v3,#v4,#v5').hide(); 
    }); 

$('#t2').click(function(){ 
    $('#v2').slideToggle('fast'); 
    $('#v1,#v3,#v4,#v5').hide(); 
    }); 

$('#t3').click(function(){ 
    $('#v3').slideToggle('fast'); 
    $('#v1,#v2,#v4,#v5').hide(); 
    }); 

$('#t4').click(function(){ 
    $('#v4').slideToggle('fast'); 
    $('#v1,#v2,#v3,#v5').hide(); 
    }); 

$('#t5').click(function(){ 
    $('#v5').slideToggle('fast'); 
    $('#v1,#v2,#v3,#v4').hide(); 
    }); 

Что является более эффективным способом, чтобы написать JS выше? Конечным результатом является то, что при нажатии #t(n)#v(n) будет расширяться, и все остальные #v(n) рухнут (если они будут расширены). По умолчанию display: на #v(n) - none.

Answer 1

// Whenever a list item in .testimonialthumbs is clicked... 
$('.testimonialthumbs').on('click', 'li', function() { 
    // Extract the number. 
    var index = $(this).attr('id').substring(1); 
    // Hide all the other divs. 
    $('.testimonialdrop:not(#v' + index + ')').hide(); 
    // ...and slideToggle ours. 
    $('#v' + index).slideToggle('fast'); 
}); 

Answer 2

попробовать

$("ul.testimonialthumbs > li").click(function() { 
    var id = $(this).attr("id"), 
     matches = id.match(/\d+$/), 
     idnum = matches[0]; 
    $("div.testimonialdrop").hide(); 
    $("div[id='v"+idnum+"']").slideToggle('fast'); 
}); 

Answer 3

$('.testimonialthumbs').on('click', 'li', function(){ 
    var id = $(this).attr('id'); 
    var el = $('#v' + id.substring(1)).slideToggle('fast'); 
    $('.testimonialdrop').not(el).hide() 
}) 

Демо: Fiddle

Answer 4

Вы можете использовать StartsWith селектор вместе с each() перебрать вашей Li:

$("[id^='t']").each(function(index) { 
    var i = index + 1; 
    $(this).click(function() { 
     $('#v' + i).slideToggle('fast'); 
     $('#v' + i).siblings("[id^='v']").hide(); 
    }) 
});