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后它会覆盖display:block添加的$('.card').show();。每个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。

使用jQuery过滤Bootstrap 4卡

1 个答案: