Question

我尝试使用jQuery来解决以下问题。目前，我没有任何有用的代码可以在此发布。

最初只能看到主行（班级term1_master和term2_master）。
按＆＃34;显示＆＃34;链接关联的行组应该显示可见性（例如，在Show tr-class中按term1_master按钮应该显示所有tr-elements拥有的班级term1。）
无法修复块数，也可能会显示term3_master，term4_master ...及其子项。

这是我的示例 HTML 代码：

<table>
  <tr class="term1_master">
    <td>Master Row 1</td>
    <td><a href="">Show</a></td>
  </tr>
  <tr class="term1">
    <td>Sub Row 1</td>
    <td>Example</td>
  </tr>
  <tr class="term1">
    <td>Sub Row 2</td>
    <td>Example</td>
  </tr>
  <tr class="term1">
    <td>Sub Row 3</td>
    <td>Example</td>
  </tr>

  <tr class="term2_master">
    <td>Master Row 2</td>
    <td><a href="">Show</a></td>
  </tr>
  <tr class="term2">
    <td>Sub Row 1</td>
    <td>Example</td>
  </tr>
  <tr class="term2">
    <td>Sub Row 2</td>
    <td>Example</td>
  </tr>
  <tr class="term2">
    <td>Sub Row 3</td>
    <td>Example</td>
  </tr>
</table>

非常感谢帮助我！

Answer 1

您根本不必使用单独的类，所有主行都可以有一个.master类。然后你可以使用优秀的nextUntil（）方法来获得你想要的东西：

$('a').click(function(e) {
    e.preventDefault();
    if($(this).text()=='Show') {
        $(this).closest('.master').nextUntil('.master').show();
        $(this).text('Hide');
    }
    else {
        $(this).closest('.master').nextUntil('.master').hide();
        $(this).text('Show');
    }
});

演示：

＆＃13;

$('a').click(function(e) {
    e.preventDefault();
    if($(this).text()=='Show') {
        $(this).closest('.master').nextUntil('.master').show();
        $(this).text('Hide');
    }
    else {
        $(this).closest('.master').nextUntil('.master').hide();
        $(this).text('Show');
    }
});

＆＃13;

tr {
  display:none;
}
tr.master {
  display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="master">
    <td>Master Row 1</td>
    <td><a href="">Show</a></td>
</tr><tr class="term1">
    <td>Sub Row 1</td>
    <td>Example</td>
</tr><tr class="term1">
    <td>Sub Row 2</td>
    <td>Example</td>
</tr><tr class="term1">
    <td>Sub Row 3</td>
    <td>Example</td>
</tr>

<tr class="master">
    <td>Master Row 2</td>
    <td><a href="">Show</a></td>
</tr><tr class="term2">
    <td>Sub Row 1</td>
    <td>Example</td>
</tr><tr class="term2">
    <td>Sub Row 2</td>
    <td>Example</td>
</tr><tr class="term2">
    <td>Sub Row 3</td>
    <td>Example</td>
</tr>

<tr class="master">
    <td>Master Row 3</td>
    <td><a href="">Show</a></td>
</tr><tr class="term3">
    <td>Sub Row 1</td>
    <td>Example</td>
</tr><tr class="term3">
    <td>Sub Row 2</td>
    <td>Example</td>
</tr><tr class="term3">
    <td>Sub Row 3</td>
    <td>Example</td>
</tr>

</table>

＆＃13;

Answer 2

您可以在相关点击处理程序中使用以下逻辑，以仅显示特定的目标跟随行，具体取决于相关类：

$(function() { // ready handler
  $('table a').on('click', function(e) {
    e.preventDefault();
    var $tr = $(this).closest('tr');
    var trClass = $tr.attr('class').split('_').shift();
    $tr.nextAll('.' + trClass).show();
  })
});

-jsFiddle-

Answer 3

以下内容适用于当前的HTML并附加term3_master，term4_master ...及其子项。

$(function() {
$('tr').not('[class$="_master"]').hide();
  $('table a').on('click', function(e) {
    e.preventDefault();
    if($(this).text() === "Show") {
    $(this).text("Hide");
    var $tr = $(this).closest('tr');
    var trClass = $tr.attr('class').split('_').shift();
    $tr.nextAll('.' + trClass).show();
    } else {
    $(this).text("Show")
    var $tr = $(this).closest('tr');
    var trClass = $tr.attr('class').split('_').shift();
    $tr.nextAll('.' + trClass).hide();
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="term1_master">
    <td>Master Row 1</td>
    <td><a href="#">Show</a></td>
</tr><tr class="term1">
    <td>Sub Row 1</td>
    <td>Example</td>
</tr><tr class="term1">
    <td>Sub Row 2</td>
    <td>Example</td>
</tr><tr class="term1">
    <td>Sub Row 3</td>
    <td>Example</td>
</tr>

<tr class="term2_master">
    <td>Master Row 2</td>
    <td><a href="#">Show</a></td>
</tr><tr class="term2">
    <td>Sub Row 1</td>
    <td>Example</td>
</tr><tr class="term2">
    <td>Sub Row 2</td>
    <td>Example</td>
</tr><tr class="term2">
    <td>Sub Row 3</td>
    <td>Example</td>
</tr>
</table>

使用jQuery显示和隐藏子箭头

3 个答案: