如何通过jQuery点击按钮移除d-none类？现有代码失效求助

问题场景 #

现有如下HTML结构：

<table class="table">
    <tr>
        <td class="cell">
            <a data-action="open-details" data-type="fields" href="#">Click</a>
        </td>
        <td class="cell">
            <a data-action="open-details" data-type="images" href="#">Click</a>
        </td>
    </tr>
    <tr class="d-none fields">
        <td>Details</td>
    </tr>
    <tr class="d-none images">
        <td>Details</td>
    </tr>
    <tr>
        <td class="cell">
            <a data-action="open-details" data-type="fields" href="#">Click</a>
        </td>
        <td class="cell">
            <a data-action="open-details" data-type="images" href="#">Click</a>
        </td>
    </tr>
    <tr class="d-none fields">
        <td>Details</td>
    </tr>
    <tr class="d-none images">
        <td>Details</td>
    </tr>
</table>

需求是：点击带有data-action="open-details"的链接时，移除对应类型（fields/images）的<tr>元素的d-none类，同时隐藏其他类型的详情行。

尝试了以下代码，但点击后无效果：

$('[data-action="open-details"]').click(function(e) {
    e.preventDefault();
    
    var datasType = $(this).data('type');
    $('.fields, .images').addClass('d-none');
    $(this).parent().parent().find('tr .' + datasType).removeClass('d-none');
});

问题原因 #

原代码的核心问题是选择器逻辑错误：

• $(this).parent().parent()获取的是当前链接所在的<tr>，但.find('tr .' + datasType)是在这个<tr>内部查找子元素，而当前<tr>里并没有嵌套的<tr>，自然找不到目标详情行。

修正方案 #

调整选择器逻辑，从当前链接所在的<tr>出发，定位到后面对应的详情行：

$('[data-action="open-details"]').click(function(e) {
    e.preventDefault();
    
    const dataType = $(this).data('type');
    // 先隐藏所有详情行
    $('.fields, .images').addClass('d-none');
    // 找到当前按钮所在tr之后的第一个对应类型的详情行，移除隐藏类
    $(this).closest('tr').nextAll('.' + dataType).first().removeClass('d-none');
});

代码说明 #

• closest('tr')：相比parent().parent()更健壮，能精准找到当前元素最近的父级<tr>，不受嵌套层级变化影响。
• nextAll('.' + dataType)：获取当前<tr>之后所有带有对应类型类的元素。
• first()：因为每组后面只会有一个对应类型的详情行，取第一个即可确保只操作当前组的目标行。

内容的提问来源于stack exchange，提问作者Testy