如何在可过滤的投资组合链接中使用特殊字符？

Question

我有一个由 JQuery 运行的可过滤投资组合（基于 thisTuts+ 文章）。它使用链接来显示和隐藏我们工作的缩略图。

HTML：

<div id="filter">
        <ul>
            <li><strong>BROWSE BY TYPE:</strong></li>
            <li class="current"><a href="#">All</a></li>
            <li><a href="#">Advertising</a></li>
            <li><a href="#">Collateral</a></li>
        </ul>
        <ul>
            <li><strong>BROWSE BY INDUSTRY:</strong></li>
            <li class="current"><a href="#">All</a></li>
            <li><a href="#">Automotive</a></li>
            <li><a href="#">Industrial</a></li>
       </ul>
</div>
<ul id="portfolio">
        <li class="advertising automotive"><a href="#"><img src="img/portfolio/thumbs/img1.jpg"></a></li>
        <li class="advertising restaurant"><a href="#"><img src="img/portfolio/thumbs/img2.jpg"></a></li>
        <li class="advertising industrial b2b"><a href="#"><img src="img/portfolio/thumbs/img3.jpg"></a></li>
</ul>

jQuery:

$(document).ready(function() {
   $('#filter a').click(function() {
   $(this).css('outline','none');
   $('#filter .current').removeClass('current');
   $(this).parent().addClass('current');

   var filterVal = $(this).text().toLowerCase().replace(' ','-');

   if(filterVal == 'all') {
     $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
   } else {
     $('ul#portfolio li').each(function() {
       if(!$(this).hasClass(filterVal)) {
         $(this).fadeOut('normal').addClass('hidden');
       } else {
         $(this).fadeIn('slow').removeClass('hidden');
       }
     });
   }

   return false;
  });
});

问题是：我不能在链接中使用特殊字符。我希望“工业”成为“工业和制造”，但它不起作用。即使我将该缩略图的类别<li> 更改为class="industrial-&-manufacturing"，它也不起作用。我也尝试过class="industrial-&-manufacturing"，但这也不起作用。我还尝试使用斜线（工业/制造），但没有奏效。

如何在此脚本中使用特殊字符并使其仍然有效？

Answer 1

您可以改用这个：

var filterVal = $(this).text().toLowerCase().split(' ').join('-');

作为另一种选择，考虑使用数据属性。例如：

<ul>
  <li><strong>BROWSE BY INDUSTRY:</strong></li>
  <li class="current"><a href="#" data-filter="all">All</a></li>
  <li><a href="#" data-filter="automotive">Automotive</a></li>
  <li><a href="#" data-filter="industrial">Industrial</a></li>
</ul>

那么您的过滤器显示名称可能与类名称不同。

附带说明，缺少一个结束 ul 标记。