我有一个像
这样的HTML块<tbody>
<tr id="first-score-row">
<td>Steve Ballmer</td>
<td>1923</td>
<td class="hide-under-480px">10/11/2015 9:21:39 PM</td>
</tr>
<tr>
<td colspan="3">
<p><a class="btn btn-primary btn-lg show-fewer-or-more-scores" id="show-more-scores">Click to See More</a></p>
</td>
</tr>
<tr class="hidden">
<td>Michael Jackson</td>
<td>300</td>
<td class="hide-under-480px">10/6/2015 2:37:30 PM</td>
</tr>
<tr class="hidden">
<td>Weird Al</td>
<td>180</td>
<td class="hide-under-480px">10/10/2015 1:20:38 AM</td>
</tr>
<tr class="hidden">
<td>Obama smokes cigs</td>
<td>60</td>
<td class="hide-under-480px">10/5/2015 10:28:37 PM</td>
</tr>
<tr class="hidden">
<td>Donald Trump</td>
<td>60</td>
<td class="hide-under-480px">10/5/2015 10:28:02 PM</td>
</tr>
<tr class="hidden">
<td colspan="3">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p><a class="btn btn-primary btn-lg show-fewer-or-more-scores" id="show-fewer-scores" target="_blank">See Fewer Scores</a></p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<p><a href="/Scores" class="btn btn-primary btn-lg" target="_blank">See <u>All</u> Scores</a></p>
</div>
</div>
</td>
</tr>
</tbody>
我试图制作一个事件,以动画的方式显示或隐藏除第一个之外的所有行(将始终显示),每个行之间的1/5秒被重新处理。我尝试过的事件处理程序是
// click function for the "See More Scores" and "See Fewer Scores" buttons
$('.show-fewer-or-more-scores').click(function ( )
{
var otherRows = $(this).closest('tbody').children('tr:not(#first-score-row)');
for (var k = 0, n = otherRows.length; k < n; ++k)
{
setTimeout(function () {
otherRows.eq(k).toggleClass('hidden');
}, k * 200 );
}
});
由于某种原因,它无法正常工作。控制台上没有打印错误,但没有任何反应,类hidden
没有切换。我在这里做错了什么?
实例here
答案 0 :(得分:3)
要定位 所有行,但首先是 ,请使用:gt(0)
选择器:
<强> jsBin demo 强>
var $rowsNotFirst = $("table tbody tr:gt(0)");
var $scoresBtn = $(".show-fewer-or-more-scores");
$scoresBtn.click(function(){
$rowsNotFirst.toggleClass("hidden");
});
添加超时:
<强> jsbin demo 强>
$scoresBtn.click(function(){
$rowsNotFirst.filter(function(idx, el){
setTimeout(function(){
$(el).toggleClass("hidden");
}, 300*idx); // 300 * element index
});
});
答案 1 :(得分:1)
我用jQuery替换你的for循环每个函数。
otherRows.each(function(i){
setTimeout(function () {
otherRows.eq(i).toggleClass('hidden');
}, i * 200 );
});
不要忘记.hidden类,例如:
.hidden {display:none}
除此之外它工作正常。
https://jsfiddle.net/partypete25/nvbraokh/20/embedded/result/
答案 2 :(得分:1)
实际问题在这里。
setTimeout(function () {
otherRows.eq(k).toggleClass('hidden');
}, k * 200 );
一旦for循环完成,k的值将等于n的值。因此,每次调用此行时,k值都相同,但不存在具有该索引值的表行。
您必须获取表格行元素,然后将方法toggleClass添加到它。