如何使用 JavaScript/jQuery“this”關鍵字來切換行

Question

我有一個表單，它將數據發布到一個表中，並將數據分成兩行，一個行標題和一個行正文（類似於引導手風琴卡標題和卡正文）。 最初，每當我單擊按鈕時，它都會切換兩個行體。 現在，它現在只切換第一行主體。

你如何使用this關鍵字，這樣當我點擊button1的row-header1 ，它切換row-body1和button2對row-header2切換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。

我花了幾天時間研究類似的問題，並試圖根據我的情況調整給定的答案，但沒有成功。

Answer 1

你不應該使用id作為多個按鈕的選擇器，因為每個元素，為了被id正確選擇，都應該是唯一的，從而一個一個選擇。 對於通用功能，當要選擇多個相似元素時，應使用class代替。

<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/

Answer 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();
});

Answer 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>