用jQuery过滤Bootstrap 4卡 [英] Bootstrap 4 cards filtering with jQuery

问题描述

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

Someone has had a dig at this before, but I don't seem to be able to make it work. I'm trying to filter cards on Bootstrap 4 and when I apply a search query, it ends up hiding all my cards, instead of just the ones it should.

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

Hopefully anyone can help.

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

推荐答案

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

The problem is that $('.card').show(); won't work because once d-none is added it overrides the display:block added by $('.card').show();. Each keyup should remove the d-none class instead...

$('#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');
})

在Codeply上进行演示

注意:jQuery :contains 区分大小写.

Note: jQuery :contains is case-sensitive.

这篇关于用jQuery过滤Bootstrap 4卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！