javascript - 如何使用 jquery 隐藏特定的 json 对象数据

Question

我使用PHP文件将json数据解析为DIV对象，下面是结果示例(HTML格式)

// hidethis.js
$('.hidden').click(function() {
    $('.agee').hide();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <h2>Data A</h2>
        <p class="agee">Lorem ipsum dolor sit amet</p>
        <button type="button" class="hidden">Hide Age A</button>
    </div>
    <div class="row">
        <h2>Data B</h2>
        <p class="agee">Lorem ipsum dolor sit amet</p>
        <button type="button" class="hidden">Hide Age B</button>
    </div>
    <div class="row">
        <h2>Data C</h2>
        <p class="agee">Lorem ipsum dolor sit amet</p>
        <button type="button" class="hidden">Hide Age C</button>
    </div>
</div>

预览:https://jsfiddle.net/xj71kqgb/

我的问题是当我点击任何“隐藏”按钮时，所有p.agee 都会自动隐藏。

我试图实现的结果，当单击“隐藏年龄 A”按钮时，只有来自数据 A 的 p.agee 将被隐藏。

并且如果可能的话，在添加新数据时无需触及 JS 脚本。有可能实现这一目标吗？

谢谢。

Answer 1

是的，您的代码将隐藏类为 .agee 的所有元素。

您必须将代码更改为:

$('.hidden').click(function() {
    $(this).closest("div.row").find(".agee").hide();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <h2>Data A</h2>
        <p class="agee">Lorem ipsum dolor sit amet</p>
        <button type="button" class="hidden">Hide Age A</button>
    </div>
    <div class="row">
        <h2>Data B</h2>
        <p class="agee">Lorem ipsum dolor sit amet</p>
        <button type="button" class="hidden">Hide Age B</button>
    </div>
    <div class="row">
        <h2>Data C</h2>
        <p class="agee">Lorem ipsum dolor sit amet</p>
        <button type="button" class="hidden">Hide Age C</button>
    </div>
</div>

当您点击 .hidden 类时。首先必须找到最接近的 div.row 标签(父 div)然后在这个 div 上你必须找到 .agee 并隐藏它。