使用 jQuery 复选框过滤器显示 "No Results" 消息

Question

我发现 jQuery 过滤器非常适合我的需要 (http://jsfiddle.net/n3EmN/171/)。我唯一的问题是，我希望它在筛选结果未产生结果时显示“未找到结果”消息。

    var $filterCheckboxes = $('input[type="checkbox"]');

$filterCheckboxes.on('change', function() {

  var selectedFilters = {};

  $filterCheckboxes.filter(':checked').each(function() {

    if (!selectedFilters.hasOwnProperty(this.name)) {
      selectedFilters[this.name] = [];
    }

    selectedFilters[this.name].push(this.value);

  });

  // create a collection containing all of the filterable elements
  var $filteredResults = $('.flower');

  // loop over the selected filter name -> (array) values pairs
  $.each(selectedFilters, function(name, filterValues) {

    // filter each .flower element
    $filteredResults = $filteredResults.filter(function() {

      var matched = false,
        currentFilterValues = $(this).data('category').split(' ');

      // loop over each category value in the current .flower's data-category
      $.each(currentFilterValues, function(_, currentFilterValue) {

        // if the current category exists in the selected filters array
        // set matched to true, and stop looping. as we're ORing in each
        // set of filters, we only need to match once

        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });

      // if matched is true the current .flower element is returned
      return matched;

    });
  });

  $('.flower').hide().filter($filteredResults).show();

});

如果“红色”和“非洲”都使用Fiddle到select，结果显示空白。理想的用户体验是说“未找到结果，请尝试更改您的过滤器。”

如何使用提供的代码完成此操作？

Answer 1

为隐藏添加 css class

.hide{display:none; }

将此 div 添加到所有 .flowers 的底部 div

<div id="NoResult" class="hide" >No results found, try changing your filters.</div>

将此添加到您的更改事件中

if(!$('.flower').is(':visible'))
 {
  $("#NoResult").removeClass("hide");
 }
 else
 {
 $("#NoResult").addClass("hide");
 
 }

这是修改后的 fiddle ：http://jsfiddle.net/r97L1zvf/1/

使用 jQuery 复选框过滤器显示 "No Results" 消息

Display "No Results" message with jQuery checkbox filter

forms

jquery