我是否错误地使用了eq(…)?或者这里出了什么问题

Am I using eq(...) incorrectly? Or what is wrong here?

本文关键字：或者 这里 问题 什么 错误 是否 eq      更新时间：2023-09-26

我有一个像

这样的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没有被切换。我哪里做错了?

要定位除第一行外的所有行使用:gt(0)选择器:

jsBin演示 

var $rowsNotFirst = $("table tbody tr:gt(0)");
var $scoresBtn = $(".show-fewer-or-more-scores");

$scoresBtn.click(function(){
  $rowsNotFirst.toggleClass("hidden");
});

添加超时:

<<p> jsbin演示/strong> 
$scoresBtn.click(function(){
  $rowsNotFirst.filter(function(idx, el){
    setTimeout(function(){
      $(el).toggleClass("hidden");
    }, 300*idx);                          // 300 * element index
  });
});

我用jQuery的each函数代替了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/

真正的问题在这里。

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

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

您必须获得表行元素，然后将toggleClass方法添加到其中。

相关文章：