.show()不工作jquery

时间:2016-09-10 20:21:16

标签: javascript jquery

我有一个过滤器类,用于过滤驻留在页面内的产品。如果有人检查过滤器,则有一个功能可用。

过滤器是复选框,其中每个复选框都包含不同的值。

我的过滤功能的作用是检查页面中所有选中的复选框,然后使用列表中的data-*全局变量来决定要显示的元素。

项目的DOM结构将是:

<body>
<ul class="products">
<li class="product" data-company="something" data-flavour="something"></li>
<li class="product" data-company="something" data-flavour="something"></li>
.
.
.
.

<li class="product" data-company="something" data-flavour="something"></li>
</ul>
</body>

下面显示了完成工作的功能。

this.filterGridProducts = function() {
  $.ajax({
      type: 'POST',
      url: 'test12.php',
      data: category,
      success: function(data) {
          $('#limitpage').html(data);
          // $('.product').hide();
          var filteredProducts =$('.product');
          //filter by colour, size, shape etc

          var filterAttributes = $('input[type="checkbox"]');
          var selectedFiltersValues = [];
          // for each attribute check the corresponding attribute filters selected
          filterAttributes.each(function() {
              if (this.checked) {
                  var currentFilter = $(this);
                  selectedFiltersValues.push("[data-" + currentFilter.attr('name') + "='" + currentFilter.val() + "']");
                  filteredProducts = filteredProducts.filter(selectedFiltersValues.join(','));
              }
          });

          filteredProducts = filteredProducts.filter(function() {
              return ($(this).attr('data-price') > first && $(this).attr('data-price') <= second);
          });


          //console.log($('.product').show());
          filteredProducts.each(function(e) {
              console.log($(this).html().show()); // not working
              $(this).show(); // not working
          })

          filteredProducts.show(); // this one is not working as well.

      }

    });
  };

filteredProducts确实包含需要过滤的元素,但我似乎无法展示它。

上面函数中的Ajax调用加载了db中存在的所有元素,来自它的产品都被隐藏了。

.show()不起作用的可能原因是什么?

更新

enter image description here

0 个答案:

没有答案