我有一个 View ,我正在其中以引导卡的形式获取数据库记录。在每张卡中,我都有与数据库列关联的复选框。 在选中复选框并单击保存按钮时,我想隐藏包含我输入该值的记录的卡
我怎样才能实现这个目标?我尝试使用卡的类名,但它隐藏了所有卡。
$('.insert').click(function() {
var rId = $(this).data('rid');
$.post("@Url.Action("
SetCleaningStatus ", "
HouseKeeping ")", {
id: rId,
InvChk: $('input[data-invchkid=' + rId + ']:checked').length,
ClnChk: $('input[data-cleanid=' + rId + ']:checked').length,
NewLin: $('input[data-nlid=' + rId + ']:checked').length,
DpClean: $('input[data-dcid=' + rId + ']:checked').length
});
$('.Resbook').hide();
});
@model IEnumerable
<RoomTypeView>
<div class="row">
@foreach (var item in Model)
{
<div class="col-3">
<div class="card border rounded DropShadow Resbook">
<div class="card-body">
Room @Html.DisplayFor(modelItem => item.RoomNo)
<button type="button" class="btn btn-default insert" data-rid="@item.RoomId">Save</button><br />
@Html.DisplayFor(modelItem => item.GuestName)<br />
<div class="row">
<div class="col-7 text-center">
@if (item.Status.HasFlag(EnumHkStatus.Cleaning))
{
<input type="checkbox" data-Cleanid="@item.RoomId" name="cstatus" class="form-check-input" />
<label>Cleaning</label>
<br />
}
@if (item.Status.HasFlag(EnumHkStatus.InventoryCheck))
{
<input type="checkbox" data-InvChkid="@item.RoomId" name="cstatus" class="form-check-input" />
<label>Inventory Check</label>
}
</div>
<div class="col-5">
@if (item.NewLinen == null)
{
<input type="checkbox" data-nlid="@item.RoomId" class="form-check-input" />
<label>New Linen</label>
<br />
}
@if (item.DeepCleaning == null)
{
<input type="checkbox" data-dcid="@item.RoomId" class="form-check-input" />
<label>Deep Cleaning</label>
}
</div>
</div>
<div class="row">
<div class="col-8">
<div class="inventory my-1">
<textarea class="form-control breakage" placeholder="Enter Breakage Note" rows="1"></textarea>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-default breakage" data-brid="@item.ReservationID">
<i class="fa fa-file-invoice" style="color:red;"></i>
</button>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="comments my-1">
<textarea class="form-control inventoryms" placeholder="Enter Inventory Missing" rows="1"></textarea>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-default invmissing" data-invmid="@item.ReservationID">
<i class="fa fa-file-invoice" style="color:red;"></i>
</button>
</div>
</div>
@Html.DisplayFor(modelItem => item.Comments)
</div>
</div>
</div>
}
</div>
这个$('.Resbook').hide();
隐藏了所有卡片。如何克服这个问题?我如何使用该 rId
来隐藏该特定卡片?
最佳答案
it is hiding all the cards
您需要确保仅隐藏相关卡。 .insert
按钮位于 .card
内这样你就可以找到.card
它在使用 .closest
内然后使用相对查找。
var card = $(this).closest(".card");
$('input[data-invchkid=' + rId + ']:checked', card)
或
card.find('input[data-invchkid=' + rId + ']:checked')
作为.card
也是.Resbook
( <div class='card Resbook'>
)您可以使用 .Resbook
而不是.card
,例如:
var card = $(this).closest(".Resbook");
$(card).hide();
给予:
$('.insert').click(function() {
var card = $(this).closest(".card");
var rId = $(this).data('rid');
$.post("@Url.Action("
SetCleaningStatus ", "
HouseKeeping ")", {
id: rId,
InvChk: $('input[data-invchkid=' + rId + ']:checked', card).length,
ClnChk: $('input[data-cleanid=' + rId + ']:checked', card).length,
NewLin: $('input[data-nlid=' + rId + ']:checked', card).length,
DpClean: $('input[data-dcid=' + rId + ']:checked', card).length
});
$(card).hide();
});
显示 .closest()
的使用的示例片段使用OP结构:
$(".insert").click(function() {
$(this).closest(".card").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3">
<div class="card Resbook">
<div class="card-body">
Room 1
<button type="button" class="btn btn-default insert" data-rid="@item.RoomId">Save</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card Resbook">
<div class="card-body">
Room 2
<button type="button" class="btn btn-default insert" data-rid="@item.RoomId">Save</button>
</div>
</div>
</div>
</div>
如果按钮不在要使用的卡片的层次结构内,则可以通过data-rid=
将它们链接在一起。值(value)观。
添加 .data-rid
到.card
让它们匹配:
<div class='card' data-rid='@item.RoomId'/>
然后将两者匹配
$("button").click(function() {
var rid = $(this).data("rid");
var card = $(".card[data-rid=" + rid + "]")
示例片段:
$(".external-insert").click(function() {
var rid = $(this).data("rid")
var card = $(".card[data-rid=" + rid + "]")
card.hide();
$(this).fadeOut(); // also hide the button
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3">
<div class="card Resbook" data-rid="1">
<div class="card-body">
Room 1
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card Resbook" data-rid="2">
<div class="card-body">
Room 2
</div>
</div>
</div>
</div>
<hr/>
<button type="button" class="btn btn-default insert external-insert" data-rid="1">Save 1</button>
<button type="button" class="btn btn-default insert external-insert" data-rid="2">Save 2</button>
关于javascript - 如何使用jquery点击按钮隐藏数据库记录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54252946/