Как скрыть запись базы данных по нажатию кнопки, используя jquery

скрывает все карты

Необходимо убедиться, что скрыта только соответствующая карта. Кнопка .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, например:

[112 ]

Предоставление:

$('.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>

[1123 ]

---

В случае, когда кнопка не находится внутри иерархии используемой карты, они могут быть связаны друг с другом посредством своих значений data-rid=.

Добавьте .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>

0

ответ дан freedomn-m 18 January 2019 в 11:25

поделиться