Question

我有一个像

这样的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

Answer 1

要定位 所有行，但首先是 ，请使用: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
  });
});

Answer 2

我用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/

Answer 3

实际问题在这里。

setTimeout(function () {
 otherRows.eq(k).toggleClass('hidden');
}, k * 200 );

一旦for循环完成，k的值将等于n的值。因此，每次调用此行时，k值都相同，但不存在具有该索引值的表行。

您必须获取表格行元素，然后将方法toggleClass添加到它。

我是否错误地使用了eq（...）？或者这里有什么问题？

3 个答案: