Javascript 表中的滑块切换冲突

我需要在表中单击图标时显示一些数据。我的问题是，只有第一个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>

@foreach（Model.Request中的变量项）
{
@DisplayFor（modelItem=>item.RequestTitle）
@DisplayFor（modelItem=>item.RequestContent）
额外的
答复
}

和我的脚本代码

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

$（“.showReplies”）。单击（函数（）{
$（this）.closest（“tr”）.next（“tr”）.find（“回复”）.slideToggle（“慢”）；
})
$（“.showExtra”）。单击（函数（）{
$（this）.closest（“tr”）.next（“tr”）.find（“extra”）.slideToggle（“slow”）；
})

---

我需要根据相应的点击隐藏/显示每个tr。有什么想法吗？谢谢大家!

您总是在第二个

中搜索

.extra

和

回复。更改代码如下。改为在
表中查找它们


$（“.showReplies”）。单击（函数（）{
$（this）.closest（“表”）.find（“回复”）.slideToggle（“慢”）；
})
$（“.showExtra”）。单击（函数（）{
$（this）.最近的（“table”）.find（.extra”）.slideToggle（“slow”）；
})

额外的
答复
您可以为
showExtra
和
showReplies
设置每个div的id逻辑，并使用
数据div id
属性将其附加到锚定标记。
单击锚定标记时，您可以隐藏所有额外和回复div，并根据所单击锚定的
数据div id
值显示相关额外或回复

参见下面的示例（请更正@i，因为我不太了解C#语法，所以我曾在这里为每个div生成唯一id）

@{int i=0；}
@foreach（Model.Request中的var项）
{
额外的
答复
@{i++；}
}

添加如下脚本，并根据单击的showReplies和showExtra的相关id显示/隐藏

<script>
        $(".showReplies").click(function () {
            //hide all replies and extras -- you can remove this if not required
            ('div[id^=repliesDiv]').hide();
            ('div[id^=extraDiv]').hide();
            //show relevent div
            var divId = $(this).data('div-id');
            $('#' + divId).show();
        })

    
        $(".showExtra").click(function () {
            //hide all replies and extras -- you can remove this if not required
            ('div[id^=repliesDiv]').hide();
            ('div[id^=extraDiv]').hide();
            var divId = $(this).data('div-id');
            $('#' + divId).show();
        })
    </script>


$（“.showReplies”）。单击（函数（）{
//隐藏所有回复和附加内容--如果不需要，可以删除此内容
（'div[id^=repliesDiv]'）。隐藏（）；
（'div[id^=extraDiv]'）。hide（）；
//显示相关div
var divId=$（this）.data（'div-id'）；
$（'#'+divId）.show（）；
})
$（“.showExtra”）。单击（函数（）{
//隐藏所有回复和附加内容--如果不需要，可以删除此内容
（'div[id^=repliesDiv]'）。隐藏（）；
（'div[id^=extraDiv]'）。hide（）；
var divId=$（this）.data（'div-id'）；
$（'#'+divId）.show（）；
})
谢谢您的回复。它似乎可以工作，但现在我的问题是，我有许多行和数据同时打开。有什么想法吗？你可以考虑把它们分成不同的表，有多行有额外的和回复类，有多个表用于相同的功能吗？如果是的话，那么你能更新你的帖子以包含这样的结构吗？不，有一个表有很多行，所有这些行都必须显示一些额外的infosok。。因此，在这种情况下，您应该能够实现Chaska提供的解决方案谢谢您的评论。它似乎可以工作，但现在我的问题是，我有许多行和数据同时打开。有什么想法吗？你能在你的帖子中添加多行这样的HTML，并解释它的预期行为，这样我就可以看一看了谢谢你的回复…它需要@（i）这样才能工作。但它不起作用。它只适用于额外的，不适用于应答它应该适用于这两种情况…您能检查一下是否有任何控制台错误或id被正确生成是的，我收到'div[id^=repliesDiv7]'。隐藏不是一个函数'