Функция jQuery Filter для мобильного сайта плохо себя ведет - PullRequest
Новая
       2

Функция jQuery Filter для мобильного сайта плохо себя ведет

0 голосов
/ 22 июня 2011

Я относительно новичок в интеграции с 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;">&nbsp;</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;
});
});

1 Ответ

0 голосов
/ 22 июня 2011

Кажется, ваша проблема здесь: var filterVal = $(this).text().toLowerCase().replace(' ','-');. В мобильной версии он не получает правильное значение. Если вы отлаживаете его (например, с помощью firebug), вы увидите это. Например, если вы щелкнете ссылку «Идентификация», $(this).text() будет «Идентификацией \ n», а при замене - «Идентификацией \ n-». В обоих случаях вы увидите много пробелов в конце значения. Если вы исправите это, я думаю, что это сработает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...