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

Question

我有一个可过滤的投资组合运行 JQuery（基于 this 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;
  });
});

问题是：我不能在链接中使用特殊字符。我希望 'Industrial' 成为 'Industrial & Manufacturing' 但它不起作用。即使我将该缩略图 <li> 的 class 更改为 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>

然后您的过滤器显示名称可以不同于 class 名称。

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

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

How to use special characters in filterable portfolio links?

html

javascript

jquery

portfolio