更有效的重复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)都会折叠（如果已展开）。 #v(n)上的默认display:是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

您可以each()一起使用StartsWith选择遍历贵丽：

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