jquery с использованием .nextUntil () - PullRequest
Новая
       6

jquery с использованием .nextUntil ()

1 голос
/ 15 сентября 2010

Я пытаюсь сгенерировать jquery-скрипт, чтобы сделать все элементы tr из таблицы кликабельными из верхней части класса, и когда один tr с вершиной класса нажимается всеми tr ниже с классом bt, пока не появится другой класс tr, будет slideToggle. *

Я пробовал несколько вещей, но ни одна из них не работает, я думаю, что у меня есть некоторые проблемы с моими селекторами.

Может ли кто-нибудь помочь?

Заранее спасибо.

Также см. Пример здесь

Один из созданных мной скриптов: 

<html>
<head>
<script type="text/javascript">
$("tr .top").click(function () {
  $('tr .bt').nextUntil('tr:not(.bt)').slideToggle("slow");
  )};
</script>
</head>
<body>
 <table>
    <tr class="top">
      <td>top row 1</td>
      <td>top row 1</td>
      <td>top row 1</td>
    </tr>
    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
    <tr class="top">
      <td>top row 2</td>
      <td>top row 2</td>
      <td>top row 2</td>
    </tr>
    <tr class="bt">
      <td>bt row 2</td>
      <td>bt row 2</td>
      <td>bt row 2</td>
    </tr>
    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
  </table>
</body>
</html>

Ответы [ 3 ]

2 голосов
/ 24 июля 2013 
 $("tr .top").click(function () {
  $('tr .bt').nextUntil('tr .top').slideToggle("slow");
  )};

Я думаю, что это работает ..

1 голос
/ 15 сентября 2010 
$("tr.top").click(function () {
//   ^
  $('tr.bt').nextUntil('tr:not(.bt)').slideToggle("slow");
//     ^
// And I think you should use $(this) here instead of $('tr.bt')
//  otherwise you cannot toggle the first .bt row,
//  but all the rest will be toggled regardless of which group.
});

Между tr и ..

не должно быть пробелов. 
"a .b"

соответствует всем потомкам из a, которые имеют класс b, тогда как 

"a.b"

соответствует всем a, которые имеют класс b.

1 голос
/ 15 сентября 2010

Вашему коду нужно несколько тиков, это: 

$("tr .top").click(function () {
  $('tr .bt').nextUntil('tr:not(.bt)').slideToggle("slow");
  )};

Должно быть так: 

$("tr.top").click(function () {
  $(this).nextUntil('tr:not(.bt)').slideToggle("slow");
});

Класс на <tr> не ниже, поэтому места нет. Вы хотите начать с $(this) (нажатой <tr>) при прохождении, а последний )}; вышел из строя, это должно быть }); закрытие функции, затем .click() call.

Вот обновленная / рабочая версия , имейте в виду, что переключение строк таблицы приводит к беспорядку, вместо этого вы можете захотеть постепенно исчезнуть, например: 

$("tr.top").click(function () {
  $(this).nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
});

Проверьте эту версию здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...