我的代码中有一个重复出现的函数,它由一组缩略图组成,当点击它们时,它会播放一个独特的视频。视频位于切换的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
。
答案 0 :(得分: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');
});
答案 1 :(得分: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();
})
});
答案 2 :(得分: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');
});
答案 3 :(得分:0)
$('.testimonialthumbs').on('click', 'li', function(){
var id = $(this).attr('id');
var el = $('#v' + id.substring(1)).slideToggle('fast');
$('.testimonialdrop').not(el).hide()
})
演示:Fiddle