使用Jquery处理div集合的DOM

Question

我正在研究应用程序的前端部分一些表格输入（以div包装）。每个div都有一个名为添加受益人。基本上，当用户点击按钮时，div在其下方应显示（默认情况下为隐藏），并且顺序继续（div上的每个按钮单击其下方的div显示）。

在每个div的按钮上，我写了一些逻辑，从而在单击事件时一个名为addBeneficiary的函数被触发。我解析的ID按钮被点击。接下来，我通过到达到父div并显示它，但逻辑不工作。

〜请协助？

标记

<!--Person One-->
<div class="container mg-t-30" id="beneficiary1">
    <div class="row col-11 mx-auto">
        <div class="col-12">
                <div class="row">
                    <div class="col-6">
                        <label> Category</label>
                        <input type="email" class="form-control" placeholder="Enter email">
                    </div>
                    <div class="col-6">
                        <label>Family Size</label>
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
                    </div>
                </div>
        </div>
    </div>
</div>

<!--Person Two-->
<div class="container mg-t-30" style="display:none;" id="beneficiary1">
    <div class="row col-11 mx-auto">
        <div class="col-12">
                <div class="row">
                    <div class="col-6">
                        <label> Category</label>
                        <input type="email" class="form-control" placeholder="Enter email">
                    </div>
                    <div class="col-6">
                        <label>Family Size</label>
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
                    </div>
                </div>
        </div>
    </div>
</div>

逻辑

function addBeneficiary(beneficiary){
    let check = $('#' + beneficiary).parents('div').last().prop('id');
    //console.log(check);

    $("check").css("display", "block");
}

Answer 1

它不起作用，因为父母双方的div id为“ beneficiary1”。而且您不能将相同的ID与多个标签一起使用。它应该是唯一的，例如beneficiary1，beneficiary2等等，并且还需要对脚本进行少量更改。

function addBeneficiary(beneficiary){
    let check = $('#' + beneficiary).parents('div').next('div');
    //console.log(check);

    check.css("display", "block");
}

jsfiddle https://jsfiddle.net/y2mva6es/