jquery - 更有效的重复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

您可以使用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();
    })
});

Answer 3

尝试

$("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 4

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

演示：小提琴