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;
  });
});

问题是：我不能在链接中使用特殊字符。我希望＆＃39;工业＆＃39;成为＆＃39;工业与工业制造业＆＃39;但它不起作用。即使我将该缩略图<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标签。

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

1 个答案: