我有幾個 divs 標簽，每個標簽里面都有一個按鈕。單擊每個按鈕將顯示一個隱藏的 div 標簽。
<div class="box-form">
<label class="control-label">name : </label>
<span class="text text-info txt_modelname">@Model.Name</span>
<button class="btn btn-primary btn-sm edit__field">edit</button><br />
<div class="box-edit-name" style="display:none;">
<form id="Frm_EditName" class="frm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control input-name" />
<input type="submit" value="save" class="btn btn-success js-btn_submitname mt-1" disabled />
</div>
</form>
</div>
</div>
<div class="box-form">
<label class="control-label">family : </label>
<span class="text text-info txt_modelname">@Model.family</span>
<button class="btn btn-primary btn-sm edit__field">edit</button><br />
<div class="box-edit-name" style="display:none;">
<form id="Frm_EditName" class="frm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control input-name" />
<input type="submit" value="save" class="btn btn-success js-btn_submitname mt-1" disabled />
</div>
</form>
</div>
</div>
我想創建一個函式，在它下面的這個 div 上顯示每個按鈕
Btn_editName.click(function () {
$('.box-edit-name').toggle();
});
uj5u.com熱心網友回復：
您可以通過以下方式選擇相應的 div：
$("button.btn.btn-primary.btn-sm.edit__field").click(function(){
$(this).next().next().toggle()
})
您使用兩個.next()呼叫，因為 div 在<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 class="box-form">
<label class="control-label">name : </label>
<span class="text text-info txt_modelname">@Model.Name</span>
<button class="btn btn-primary btn-sm edit__field">edit</button><br />
<div class="box-edit-name" style="display:none;">
<form id="Frm_EditName" class="frm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control input-name" />
<input type="submit" value="save" class="btn btn-success js-btn_submitname mt-1" disabled />
</div>
</form>
</div>
</div>
<div class="box-form">
<label class="control-label">family : </label>
<span class="text text-info txt_modelname">@Model.family</span>
<button class="btn btn-primary btn-sm edit__field">edit</button><br />
<div class="box-edit-name" style="display:none;">
<form id="Frm_EditName" class="frm" method="post">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control input-name" />
<input type="submit" value="save" class="btn btn-success js-btn_submitname mt-1" disabled />
</div>
</form>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/416976.html
標籤：