Вопрос про jQuery - PullRequest
Новая
       8

Вопрос про jQuery

1 голос
/ 20 декабря 2009

Для этого HTML-кода: 

<table>
    <tr><td>Visible</td></tr>
    <tr><td>Visible</td></tr>
    <tr><td>Visible</td></tr>
    <!-- etc... -->
    <tr style="display:none"><td>Hidden</td></tr>
    <tr style="display:none"><td>Hidden</td></tr>
    <tr style="display:none"><td>Hidden</td></tr>
    <!-- etc... -->
    <tr><td><a class="show-5-more">Show 5 More</a></td></tr>
</table>

Вот код jQuery, который я получил до сих пор: 

//show 5 more table rows (that were previously hidden)
$('a.show-5-more').click(function() {
    alert('clicked!');
    return false;
});

Как я могу это сделать:

  • Выберите первую скрытую строку таблицы, затем slideDown() строку таблицы
  • выберите следующий, сдвиньте его вниз
  • выберите следующий и т. Д. ...
  • Я хочу сделать это для 5 скрытых строк таблицы

Ответы [ 2 ]

2 голосов
/ 20 декабря 2009

Это скатит вниз первые пять скрытых строк в той же таблице, в которой нажата ссылка: 

$('a.show-5-more').click(function() {
  $(this).closest("table").find("tr:hidden:lt(5)").slideDown();
  return false;
});

Если вы хотите сдвинуть их один за другим, у вас есть несколько вариантов. Вероятно, проще всего использовать тайм-ауты, чтобы эффективно связать их вместе: 

$('a.show-5-more').click(function() {
  $(this).closest("table").find("tr:hidden:lt(5)").stop().each(function(i, val) {
    slide_down(this, i, 600);
  });
  return false;
});

function slide_down(el, i, delay) {
  setTimeout(function() {
    $(el).slideDown(delay);
  }, i * delay);
}

В качестве альтернативы вы можете попробовать связать обратные вызовы на slideDown() вместе.

Однако в этом сценарии я бы посоветовал использовать <tbody>, чтобы упростить реализацию намного : 

<table>
<tbody>
  <tr><td>Visible</td></tr>
  <tr><td>Visible</td></tr>
  <tr><td>Visible</td></tr>
  ...
</tbody>
<tbody style="display: none;">
  <tr><td>Hidden</td></tr>
  <tr><td>Hidden</td></tr>
  <tr><td>Hidden</td></tr>
  ...
</tbody>
<tbody style="display: none;">
  <tr><td>Hidden</td></tr>
  <tr><td>Hidden</td></tr>
  <tr><td>Hidden</td></tr>
  ...
</tbody>
<tr><td><a class="show-5-more">Show 5 More</a></td></tr>
</table>

и затем: 

$('a.show-5-more').click(function() {
  $(this).closest("table").find("tbody:hidden:first").slideDown("slow");
  return false;
});

Это намного проще для группировки строк для такого рода вещей.

0 голосов
/ 20 декабря 2009

Чтобы показать 5 раз, вы можете использовать 

$(function() {
  $('.show-5-more').click(function() {
    $(this).closest('table').data('row', 0);
    slideDownNext.call(this);
  });
});

function slideDownNext() {
  var $table = $(this).closest('table');
  if($table.data('row') < 5) {
    $table.data('row', $table.data('row') + 1);
    $table.find('tr:hidden:first').slideDown('', slideDownNext);
  }
}
...