如何使用 jquery 隐藏特定的 json 对象数据答案

【问题标题】：How to hide specific json object data using jquery如何使用 jquery 隐藏特定的 json 对象数据
【发布时间】：2019-12-24 15:57:34
【问题描述】：

我使用 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 脚本。有可能实现这一目标吗？

谢谢。

【问题讨论】：

标签： javascript php jquery json

【解决方案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并隐藏它。

【讨论】：

【解决方案2】：

如果您想再次点击显示页面，您可以使用切换功能

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

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

【讨论】：