javascript - 表格中的滑动切换冲突

Question

我需要在点击表格中的图标时显示一些数据。我的问题是只有第一个 tr 受到影响。

在我的html代码下面

  @foreach (var item in Model.Request)
       {
         <tr>
            <td>
                @Html.DisplayFor(modelItem => item.RequestTitle)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.RequestContent)
            </td>
              
               <td>
               <a href="#" class="showExtra"><i class="fas fa-plus"></i> 
               </a>
               <a href="#" class="showReplies"><i class="fas fa-info"></i> 
               </a>
            </td>
          </tr>
        <tr>
            <td>
                <div class="extra" style="display:none">
                    extra
                </div>
            </td>
        </tr>

        <tr>
            <td>
              <div class="replies" style="display:none">
                <div> replies</div>
               </div>
             </td>
        </tr>
       }

还有我的脚本代码

 <script>
        $(".showReplies").click(function () {
            $(this).closest("tr").next("tr").find(".replies").slideToggle("slow");
        })

    
        $(".showExtra").click(function () {
            $(this).closest("tr").next("tr").find(".extra").slideToggle("slow");
        })
    </script>

我需要根据相应的点击隐藏/显示每个 tr。任何想法？谢谢！

标签： javascripthtmljquerytoggle

Answer 1

你总是在.extra寻找.replies第二<tr>。更改代码如下。table而是找到它们。

$(".showReplies").click(function() {
  $(this).closest("table").find(".replies").slideToggle("slow");
})

$(".showExtra").click(function() {
  $(this).closest("table").find(".extra").slideToggle("slow");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="#" class="showExtra">Show Extra</a>
      <a href="#" class="showReplies">Show Replies</a>
    </td>
  </tr>
  <tr>
    <td>
      <div class="extra" style="display:none">
        extra
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="replies" style="display:none">
        <div> replies</div>
      </div>
    </td>
  </tr>
</table>