jquery - 使用 jQuery 管理数据库填充的过滤器名称以显示一些投资组合项目

Question

我有一个产品页面，我在其中创建了一个过滤器来按类别对产品列表进行排序。

$(document).ready(function() {
  $(".tab").click(function() {
    var value = $(this).attr('data-filter');
    if (value == "all") {
      //$('.filter').removeClass('hidden');
      $('.filter').show('1000');
    } else {
      $(".filter").not('.' + value).hide('3000');
      $('.filter').filter('.' + value).show('3000');
    }
  });

  if ($(".tab").removeClass("active")) {
    $(this).removeClass("active");
  }

  $(this).addClass("active");

一切正常，但我有一个名为“Power Tool”的类别，只有这个过滤器不适合我。我怀疑问题出在“权力”和“工具”之间的空白。

您可以在此处看到此代码:http://www.buildersmart.net/products.php

Answer 1

这将为您的案例带来神奇的效果。

$(document).ready(function() {
      $(".tab").click(function() {
        var value = $(this).attr('data-filter');
            value = value.split(' ').join('.');
        if (value == "all") {
          //$('.filter').removeClass('hidden');
          $('.filter').show('1000');
        } else {
          $(".filter").not('.' + value).hide('3000');
          $('.filter').filter('.' + value).show('3000');
        }
      });

      if ($(".tab").removeClass("active")) {
        $(this).removeClass("active");
      }

      $(this).addClass("active");

注意:value = value.split(' ').join('.');

这段代码将删除带点的空格。所以“Power Tools”将变成“Power.Tools”。然后 jQuery 选择器可以像

一样选择它

$('.Power.Tools').show('3000');