如何使用 JavaScript/jQuery “this” 关键字来切换行答案

【问题标题】：How to use JavaScript/jQuery "this" keyword to toggle rows如何使用 JavaScript/jQuery “this” 关键字来切换行
【发布时间】：2018-11-03 13:56:57
【问题描述】：

我有一个表格，可以将数据发布到表格中，并将数据分成两行，一个行标题和一个行体（类似于引导手风琴卡头和卡体）。最初，每当我单击一个按钮时，它都会切换两个行体。现在，它现在只切换第一行主体。

如何使用this 关键字，以便当我点击row-header1 上的button1 时，它会切换row-body1，而row-header2 上的button2 会切换row-body2？

这是我实际使用的代码，但它包含 ejs：

<table class="table table-hover table-sm">
<thead>
  <tr>
    <th><i class="fas fa-cart-plus"></i></th>
    <th>Deadline</th>
    <th>Award</th>
    <th>Fee</th>
    <th>#Copies</th>
    <th>Genre</th>
    <th>More Info</th>
  </tr>
</thead>

<tbody>
  <!--Row header-->
  <tr id="table-header">
    <% awards.forEach(function(award){ %>
    <td><input type="checkbox" name="" value=""/></td>
    <td><%= award.deadline %></td>
    <td><%= award.awdname %></td>
    <td>$<%= award.fee %></td>
    <td><%= award.copies %></td>
    <td><%= award.genre %></td>
    <td><button id="moreInfo">Click Me</i></button></td>

  <!--Row body    -->
  <tr id="table-body">
    <td colspan="7">
      <div class="showContent hide"><label for="">Description:</label> <%= award.desc %></div>
      <div class="showContent hide"><label for="">Sponsored by:</label> <%= award.sponsor %></div>
      <div class="showContent hide"><label for="">Prize: $</label><%= award.prize %></div>
      <div class="showContent hide"><label for="">Shipping status:</label> <%= award.postorarrive %></div>
      <div class="showContent hide"><label for="">Website:</label> <%= award.url %></div>
    </td>
  </tr>
  <tr><% }); %></tr>               
</tbody>
</table>

脚本

$("#table-body").hide();

$("#moreInfo").on("click", function() {
    $("#table-body").toggle();
});

请参阅我的JSFiddle 以获取上述代码的修改版本，但没有 ejs。

我花了几天时间研究类似的问题，并试图根据我的场景调整给定的答案，但没有成功。

【问题讨论】：

问题出在您的JSFiddle 是您将相同的 id 分配给不同的元素，这是错误的
TJS13 你检查答案了吗
感谢您的来信，kellymandem。最初，我没有任何只有 ids 的类，当我查看以前的 SO 询问并尝试使其适应我的场景时，我一定是不小心把它留在了里面。以后我会记得谨慎对待 id。
有人可以澄清 Gokul Maha 的 $(this).parent().parent().next().toggle() 与 Alive or Die 的 $(this).closest('tr' 之间的区别吗？ ).next(".table-body").toggle();两者都有效，但一个比另一个更可取或更清洁？

标签： javascript jquery html html-table toggle

【解决方案1】：

您不应该使用id 作为多个按钮的选择器，因为每个元素，为了被id 正确选择，都应该是唯一的，因此会被一一选择。 For common functionality, when multiple similar elements to be selected class should be used instead.

<table class="table table-hover table-sm">
    <thead>
        <tr>
            <td>Row#</td>
            <th><i class="fas fa-cart-plus"></i></th>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Details</th>
        </tr>
    </thead> 
    <tbody>
        <!--Row header-->
        <tr>
            <td>1</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row1 Content1</td>
            <td>R1C2</td>
            <td>R1C3</td>
            <td><button class="moreInfo">Click Me</button></td> 
        </tr> 
        <!--Row body   -->
        <tr class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent"><label for="">Description1:</label></div>  
            </td>
        </tr> 
        <tr>
            <td>2</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row2 Content1</td>
            <td>R2C2</td>
            <td>R2C3</td>
            <td><button class="moreInfo">Click Me</button></td> 
        </tr> 
        <!--Row body   -->
        <tr class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent"><label for="">Description2:</label></div>  
            </td>
        </tr> 
    </tbody>
</table>

$(".table-body").hide();
$(".moreInfo").on("click", function(){
    $(this).parent().parent().next().toggle();
});

https://jsfiddle.net/kaxocr7h/1/

【讨论】：

请注意，id 对于元素来说应该是唯一的。
谢谢！这不仅适用于 jsfiddle，而且适用于我的实际 .ejs 代码！

【解决方案2】：

$(".table-body").hide();
$(document).on("click", ".moreInfo", function(){
   $(this).parent().parent().next().toggle();
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->


<table class="table table-hover table-sm">
    <thead>
        <tr>
            <td>Row#</td>
            <th><i class="fas fa-cart-plus"></i></th>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Details</th>
        </tr>
    </thead>
    
    <tbody>
        <!--Row header-->
        <tr id="table-header">
            <td>1</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row1 Content1</td>
            <td>R1C2</td>
            <td>R1C3</td>
            <td><button id="moreInfo" class="moreInfo">Click Me</button></td> 
        </tr>
        
        <!--Row body   -->
        <tr id="table-body" class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent hide"><label for="">Description1:</label></div>  
            </td>
        </tr>
        
        <tr id="table-header">
            <td>2</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row2 Content1</td>
            <td>R2C2</td>
            <td>R2C3</td>
            <td><button id="moreInfo"  class="moreInfo">Click Me</button></td> 
        </tr>
        
        
        <!--Row body   -->
        <tr id="table-body" class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent hide"><label for="">Description2:</label></div>  
            </td>
        </tr>
                 
    </tbody>
</table>

为更多信息按钮和必须切换的表格行添加一个类

    <table class="table table-hover table-sm">
        <thead>
            <tr>
                <td>Row#</td>
                <th><i class="fas fa-cart-plus"></i></th>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Details</th>
            </tr>
        </thead>

        <tbody>
            <!--Row header-->
            <tr id="table-header">
                <td>1</td>
                <td><input type="checkbox" name="" value=""/></td>
                <td>Row1 Content1</td>
                <td>R1C2</td>
                <td>R1C3</td>
                <td><button id="moreInfo" class="moreInfo">Click Me</button></td> 
            </tr>

            <!--Row body   -->
            <tr id="table-body" class="table-body">
                <td colspan="7" class="hiddenRow">
                    <div class="showContent hide"><label for="">Description1:</label></div>  
                </td>
            </tr>

            <tr id="table-header">
                <td>2</td>
                <td><input type="checkbox" name="" value=""/></td>
                <td>Row2 Content1</td>
                <td>R2C2</td>
                <td>R2C3</td>
                <td><button id="moreInfo"  class="moreInfo">Click Me</button></td> 
            </tr>


            <!--Row body   -->
            <tr id="table-body" class="table-body">
                <td colspan="7" class="hiddenRow">
                    <div class="showContent hide"><label for="">Description2:</label></div>  
                </td>
            </tr>

        </tbody>
    </table>






    $(".table-body").hide();
$(document).on("click", ".moreInfo", function(){
   $(this).parent().parent().next().toggle();
});

【讨论】：

【解决方案3】：

id 应该是唯一的，使用class 选择器查看下面的代码。

$(document).ready(function() {
  $(".table-body").hide();
  $(".moreInfo").on("click", function() {
    $(this).closest('tr').next(".table-body").toggle();
  });
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm">
  <thead>
    <tr>
      <td>Row#</td>
      <th><i class="fas fa-cart-plus"></i></th>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Details</th>
    </tr>
  </thead>

  <tbody>
    <!--Row header-->
    <tr id="table-header">
      <td>1</td>
      <td><input type="checkbox" name="" value="" /></td>
      <td>Row1 Content1</td>
      <td>R1C2</td>
      <td>R1C3</td>
      <td><button class="moreInfo">Click Me</button></td>
    </tr>

    <!--Row body   -->
    <tr class="table-body">
      <td colspan="7" class="hiddenRow">
        <div class="showContent hide"><label for="">Description1:</label></div>
      </td>
    </tr>

    <tr id="table-header">
      <td>2</td>
      <td><input type="checkbox" name="" value="" /></td>
      <td>Row2 Content1</td>
      <td>R2C2</td>
      <td>R2C3</td>
      <td><button class="moreInfo">Click Me</button></td>
    </tr>


    <!--Row body   -->
    <tr class="table-body">
      <td colspan="7" class="hiddenRow">
        <div class="showContent hide"><label for="">Description2:</label></div>
      </td>
    </tr>

  </tbody>
</table>

【讨论】：