0

私のコードには、クリックすると一意のビデオを再生する一連のサムネイルで構成される繰り返し関数があります。ビデオは、切り替えられた 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。

4

4 に答える 4

2 
// 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');
});
于 2013-04-29T04:21:48.123 に答える
1

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();
    })
});
于 2013-04-29T04:24:26.037 に答える
0 
$('.testimonialthumbs').on('click', 'li', function(){
    var id = $(this).attr('id');
    var el = $('#v' + id.substring(1)).slideToggle('fast');
    $('.testimonialdrop').not(el).hide()
})

デモ:フィドル

于 2013-04-29T04:24:24.393 に答える
0

試す

$("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');
});
于 2013-04-29T04:22:05.670 に答える