我对jQuery集成相对较新，而且我的网站移动版本存在问题。
我创建了一个带有过滤功能的网站，该功能通过点击左侧导航栏中的一个图标激活 - http://www.mpwrks.com
我正在尝试在网站的移动版本上实施过滤功能 - http://www.mpwrks.com/index.php/ipad_index_previews
如您所见，移动网站上的过滤功能会淡出列表项，但不会替换它们。我不确定问题是什么？
我的html标记如下：
<body>
<div id="page">
<div id="sidebar">
<nav id="navWrapper">
<img src="http://mpwrks.com/mp_images/giantpanda-ipad.jpg" alt="Home" />
<ul id="filter">
<li class="current"><a href="#"><span style="visibility:hidden; font-size:0px;">ALL</span>
<img src="http://www.mpwrks.com/mp_images/allprojects.jpg" width="129" height="134" alt="All Projects" /></a>
</li>
<li class="identity"><a href="#contentTop"><span style="visibility:hidden; font-size:0px;">Identity</span>
<img src="http://www.mpwrks.com/mp_images/identity.jpg" width="129" height="134" alt="Identity Projects" /></a>
</li>
<li class="print"><a href="#"><span style="visibility:hidden; font-size:0px;">Print</span>
<img src="http://www.mpwrks.com/mp_images/print.jpg" width="129" height="134" alt="Print Projects" /></a>
</li>
<li class="illustration"><a href="#"><span style="visibility:hidden; font-size:0px;">Illustration</span>
<img src="http://www.mpwrks.com/mp_images/illustration.jpg" width="129" height="134" alt="Illustration Projects" /></a>
</li>
<li class="interactive"><a href="#"><span style="visibility:hidden; font-size:0px;">Interactive</span>
<img src="http://www.mpwrks.com/mp_images/interactive.jpg" width="129" height="134" alt="Interactive Projects" /></a>
</li>
<li class="environmental"><a href="#"><span style="visibility:hidden; font-size:0px;">Environmental</span>
<img src="http://www.mpwrks.com/mp_images/environmental.jpg" width="129" height="134" alt="Environmental Projects" /></a>
</li>
</ul>
</nav>
</div><!--end sidebar-->
<div id="content">
<article id="contentWrapper">
<div id="contentScroller">
<a id="contentTop" style="visibility:hidden; position:absolute; top:-20px;"> </a>
<ul id="portfolio">
<li class="identity"><img src="http://www.mpwrks.com/mp_images/prev_mplogo.jpg" alt="Menacing Panda Logo" /></li>
<li class="print"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/plug_war">
<img src="http://www.mpwrks.com/mp_images/prev_plugwar.jpg" alt="Plug War Poster" /></a>
</li>
<li class="environmental"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/2010_ashp">
<img src="http://www.mpwrks.com/mp_images/prev_2010ashp.jpg" alt="Safety In Numbers Booth" /></a>
</li>
<li class="illustration"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/michelle_rhee">
<img src="http://www.mpwrks.com/mp_images/prev_michrhee.jpg" alt="Michelle Rhee Portrait" /></a>
</li>
<li class="interactive"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/revert_flash_intro">
<img src="http://www.mpwrks.com/mp_images/prev_revert.jpg" alt="Revert Site Intro" /></a>
</li>
<li class="identity"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/repeater_pump_logo">
<img src="http://www.mpwrks.com/mp_images/prev_reppump.jpg" alt="Repeater Pump Identity" /></a>
</li>
<li class="identity"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/thirsty_robot">
<img src="http://www.mpwrks.com/mp_images/prev_thirstyrobot.jpg" alt="Thirsty Robot Identity" /></a>
</li>
<li class="print"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/eva_packaging">
<img src="http://www.mpwrks.com/mp_images/prev_eva.jpg" alt="EVA Packaging" /></a>
</li>
<li class="interactive"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/naf_site">
<img src="http://www.mpwrks.com/mp_images/prev_naf.jpg" alt="Need-A-Framer Site" /></a>
</li>
<li class="environmental"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/expose_yourself">
<img src="http://www.mpwrks.com/mp_images/prev_expose.jpg" alt="Expose Yourself Supergraphic" /></a>
</li>
<li class="print"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/innovation_mailer">
<img src="http://www.mpwrks.com/mp_images/prev_innovation.jpg" alt="Innovation Mailer" /></a>
</li>
<li class="identity"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/gold_medalists">
<img src="http://www.mpwrks.com/mp_images/prev_goldmedalists.jpg" alt="Gold Medalists Identities" /></a>
</li>
<li class="interactive"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/gold_medalists_site">
<img src="http://www.mpwrks.com/mp_images/prev_gmedalists.jpg" alt="Gold Medalists Site" /></a>
</li>
<li class="environmental"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/right_equipment">
<img src="http://www.mpwrks.com/mp_images/prev_rightequip.jpg" alt="The Right Equipment Supergraphic" /></a>
</li>
<li class="interactive"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/mp_site">
<img src="http://www.mpwrks.com/mp_images/prev_mpsite.jpg" alt="MP Site" /></a>
</li>
<li class="illustration"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/outdoor_church">
<img src="http://www.mpwrks.com/mp_images/prev_outdoorchurch.jpg" alt="Outdoor Church" /></a>
</li>
<li class="illustration"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/count_me_in">
<img src="http://www.mpwrks.com/mp_images/prev_countmein.jpg" alt="Count Me In" /></a>
</li>
<li class="print"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/3reasons_mailer">
<img src="http://www.mpwrks.com/mp_images/prev_3reasons.jpg" alt="Innovation Mailer" /></a>
</li>
<li class="illustration"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/noire">
<img src="http://www.mpwrks.com/mp_images/prev_noire.jpg" alt="Noire Faces" /></a>
</li>
<li class="identity"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/real_pharmacy_logo">
<img src="http://www.mpwrks.com/mp_images/prev_realpharm.jpg" alt="RealPharmacy Identity" /></a>
</li>
<li class="print"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/realpharmacy_poster">
<img src="http://www.mpwrks.com/mp_images/prev_rpharmposter.jpg" alt="RealPharmacy Poster" /></a>
</li>
<li class="illustration"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/ka_info">
<img src="http://www.mpwrks.com/mp_images/prev_kainfo.jpg" alt="KoreAm Info Graphic" /></a>
</li>
<li class="print"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/pewpew">
<img src="http://www.mpwrks.com/mp_images/prev_pewpew.jpg" alt="PewPew Poster" /></a>
</li>
<li class="illustration"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/a_job_for">
<img src="http://www.mpwrks.com/mp_images/prev_ajobfor.jpg" alt="Looks Like A Job For" /></a>
</li>
<li class="interactive"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/jampas">
<img src="http://www.mpwrks.com/mp_images/prev_jampas.jpg" alt="Jampas Site" /></a>
</li>
<li class="print"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/allinhead">
<img src="http://www.mpwrks.com/mp_images/prev_allinhead.jpg" alt="All In Your Head Poster" /></a>
</li>
<li class="illustration"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/whiskey">
<img src="http://www.mpwrks.com/mp_images/prev_whiskey.jpg" alt="Whiskey Is For Kings" /></a>
</li>
<li class="print"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/wedding_invites">
<img src="http://www.mpwrks.com/mp_images/prev_weddinginvites.jpg" alt="Wedding Invites" /></a>
</li>
<li class="print"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/star_center_brochure">
<img src="http://www.mpwrks.com/mp_images/prev_starctrbroch.jpg" alt="STAR Center Brochure" /></a>
</li>
<li class="print"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/rapidfill_mailer">
<img src="http://www.mpwrks.com/mp_images/prev_rfillmailer.jpg" alt="RapidFill Mailer" /></a>
</li>
<li class="identity"><a class="detailpane" href="http://www.mpwrks.com/index.php/Work_Pages/square_dancing">
<img src="http://www.mpwrks.com/mp_images/prev_squaredancing.jpg" alt="Square Dancing Identity" /></a>
</li>
</ul>
</div><!--end contentScroller-->
</article>
</div><!--end content-->
jQuery代码如下：
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#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('slow').addClass('hidden');
} else {
$(this).delay('800').fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
答案 0 :(得分：0)
看来你的问题就在这里：var filterVal = $(this).text().toLowerCase().replace(' ','-');。在移动版中，它没有获得正确的值。如果您调试它（例如使用firebug），您将看到它。例如，如果单击“标识”链接，则$(this).text()为“标识\ n”，当您执行替换时，它是“标识\ n-”。在这两种情况下，您都会在值的末尾看到很多空格。如果你解决这个问题，我认为它会起作用。