Use a function for multiple events in JavaScript?-CodePudding

I have several divs tag, each with a button inside. Clicking on each button will show a hidden div tag.

<div >
    <label >name : </label>
    <span >@Model.Name</span>
    <button >edit</button><br />
    <div  style="display:none;">
        <form id="Frm_EditName"  method="post">
            <div >
                <label asp-for="Name" ></label>
                <input asp-for="Name"  />
                <input type="submit" value="save"  disabled />
            </div>
        </form>
    </div>
</div>

<div >
    <label >family : </label>
    <span >@Model.family</span>
    <button >edit</button><br />
    <div  style="display:none;">
        <form id="Frm_EditName"  method="post">
            <div >
                <label asp-for="Name" ></label>
                <input asp-for="Name"  />
                <input type="submit" value="save"  disabled />
            </div>
        </form>
    </div>
</div>

I want to create a function that displays every button on this div below it

Btn_editName.click(function () {
    $('.box-edit-name').toggle();
});

CodePudding user response：

You could select the corresponding div via:

$("button.btn.btn-primary.btn-sm.edit__field").click(function(){
  $(this).next().next().toggle()
})

You use two .next() calls because the div comes after a <br />

$("button.btn.btn-primary.btn-sm.edit__field").click(function() {
  $(this).next().next().toggle()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <label >name : </label>
  <span >@Model.Name</span>
  <button >edit</button><br />
  <div  style="display:none;">
    <form id="Frm_EditName"  method="post">
      <div >
        <label asp-for="Name" ></label>
        <input asp-for="Name"  />
        <input type="submit" value="save"  disabled />
      </div>
    </form>
  </div>
</div>

<div >
  <label >family : </label>
  <span >@Model.family</span>
  <button >edit</button><br />
  <div  style="display:none;">
    <form id="Frm_EditName"  method="post">
      <div >
        <label asp-for="Name" ></label>
        <input asp-for="Name"  />
        <input type="submit" value="save"  disabled />
      </div>
    </form>
  </div>
</div>