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

Question

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

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结束标记。