使用 jQuery 进行 Bootstrap 4 卡片过滤

Question

以前有人对此进行了挖掘，但我似乎无法使其发挥作用。我正在尝试在 Bootstrap 4 上过滤卡片，当我应用搜索查询时，它最终隐藏了我所有的卡片，而不仅仅是它应该隐藏的卡片。

希望任何人都可以提供帮助。

  $('#search').keyup(function() {
    $('.card').show();
    var filter = $(this).val(); // get the value of the input, which we filter on
    $('.card-deck').find('.card .card-body h4:not(:contains(" + filter + "))').parent().parent().addClass('d-none');
  })

这是完整代码：https://jsfiddle.net/8120104x/#&togetherjs=jTm0prUR4S

Answer 1

问题是$('.card').show(); 不起作用，因为一旦添加了d-none，它就会覆盖$('.card').show(); 添加的display:block。每个keyup 都应该删除d-none 类...

$('#search').keyup(function (){
    $('.card').removeClass('d-none');
    var filter = $(this).val(); // get the value of the input, which we filter on
    $('.card-deck').find('.card .card-body h4:not(:contains("'+filter+'"))').parent().parent().addClass('d-none');
})

Working demo on Codeply

注意：jQuery :contains is case-sensitive.