如何使用JavaScript/jQuery"this"关键字来切换行 [英] How to use JavaScript/jQuery "this" keyword to toggle rows

问题描述

我有一个表单，该表单会将数据发布到表中，并将数据分为两行，行标题和行主体(类似于自举式手风琴卡标题和卡主体).最初，每当我单击按钮时，它都会切换两个行实体.现在，它只是切换第一行主体.

I have a form that will post data to a table and will separate the data into two rows, a row-header and a row-body (similar to bootstrap accordion card-header and card-body). Initially, whenever I click on a button it toggles both row-bodies. Now, it's now only toggling the first row body.

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

How do you use the this keyword so that when I click on button1 on row-header1, it toggles row-body1, and button2 on row-header2 toggles row-body2?

这是我实际使用的代码，但其中包含ejs:

This is the code I'm actually working with, but it contains 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.

See my JSFiddle for a modified version of the above code but without ejs.

我花了几天时间研究类似的问题，并尝试将给定的答案用于我的情况，但没有成功.

I've spent days looking at similar questions and trying to adapt the given answers to my scenario but with no success.

推荐答案

您不应将id用作多个按钮的选择器，因为要被id正确选择的每个元素都应该是唯一的，并且因此一一选择.对于共同的功能，当待选择的多个类似的元件应被代替使用.

You should not use id as a selector for multiple buttons, because every element, in order to be properly selected by id should be unique, and thus selected one by one. 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/

这篇关于如何使用JavaScript/jQuery"this"关键字来切换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！