How do I filter using double words?

Question

I am implementing a modified version of Masonry where I have a series of photos that can be filtered by clicking on a filter list at the top of the page. When the filter is a single word like Photography or Video, the filter works fine, but when the filter consists of more than one word, like 'Content Management', it 'breaks' and does not return any results.

Here is the filter code:

<ul id="filters">
    <li><a href="#filter">Portfolio</a>
        <ul>
            <li><a href="#filter">Media Integration</a></li>
            <li><a href="#filter">Websites</a></li>
            <li><a href="#filter">Mobile sites</a></li>
            <li><a href="#filter">Content Management</a></li>
            <li><a href="#filter">Social Media</a></li>
            <li><a href="#filter">Branding and Logo</a></li>
            <li><a href="#filter">Photography</a></li>
            <li><a href="#filter">Video</a></li>
            <li><a href="#filter">Infographics</a></li>
            <li><a href="#filter">Print</a></li>
            <li><a href="#filter">InteractiveEPubs</a></li>
        </ul>
    </li>
</ul>

Here is the content, including the class values that serve as filter criteria.

<div id="our-work" role="main">
<div class="project col-sm-3 Media Integration Photography Branding and Logo"><img src="/images/rou20140618-023.jpg" alt="rou20140618-023" width="262" height="175"></div>
<div class="project col-sm-3 Websites Video Print Infographics"><img src="/images/rou20140626-009.jpg" alt="rou20140626-009" width="262" height="175"></div>
<div class="project col-sm-3 Content Management Photography Mobile Sites"><img src="/images/rou20140613-181.jpg" alt="rou20140613-181" width="262" height="175"></div>
<div class="project col-sm-3 Websites Video Infographics"><img src="/images/rou20140626-027.jpg" alt="rou20140626-027" width="262" height="175"></div>
<div class="project col-sm-3 Editorial Video Print Interactive EPubs"><img src="/images/rou20140611-042.jpg" alt="rou20140611-042" width="262" height="175"></div>
<div class="project col-sm-3 Websites Video Infographics"><img src="/images/rou20140629-024.jpg" alt="rou20140629-024" width="262" height="175"></div>
<div class="project col-sm-3 Editorial Design Print"><img src="/images/rou20140618-014.jpg" alt="rou20140618-014" width="262" height="175"></div>
<div class="project col-sm-3 Design Photography Infographics"><img src="/images/rou20140612-146.jpg" alt="rou20140612-146" width="262" height="175"></div>
<div class="project col-sm-3 Websites Social Media Print"><img src="/images/rou20140613-192.jpg" alt="rou20140613-192" width="262" height="175"></div>
<div class="project col-sm-3 Nature Photography Infographics"><img src="/images/rou20140530-280.jpg" alt="rou20140530-280" width="262" height="175"></div>
<div class="project col-sm-3 Websites Print Infographics"><img src="/images/rou20140616-022.jpg" alt="rou20140616-022" width="262" height="175"></div>
<div class="project col-sm-3 Nature Design Photography"><img src="/images/rou20140613-155.jpg" alt="rou20140613-155" width="262" height="175"></div>
</div>

Here is the jQuery

$(window).load(function(){
    $('#our-work').masonry({
        singleMode: true,
        itemSelector: '.project:not(.hidden)',
        isFitWidth: true,
        isAnimated: true
    });
});


$(document).ready(function() {
    $('ul#filters a').click(function() {
        $(this).css('outline','none');
        $('ul#filters .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().replace(' ','-');

        if(filterVal == 'Portfolio') {$('.hidden').fadeIn('slow').removeClass('hidden');} else {

            $('.project').each(function() {
                if(!$(this).hasClass(filterVal)) {$(this).fadeOut('normal').addClass('hidden');} else {$(this).fadeIn('slow').removeClass('hidden');}
            });
        }
        $('#our-work').masonry('reload');
        return false;
    });
});

I tried wrapping the class values in single quotes: 'class name' but that didn't help.

Short of making all the filter values single words, what other options are there for enabling the multi-word filter values to return results?

Thanks.

Class names cannot contain spaces, as they're used as separators. `
` exposes eight classes, not five. Your code seems to turn spaces into hyphens in its filter, but your markup does not follow. — Frédéric Hamidi, Jul 04 '14 at 18:05

score 2 · Accepted Answer · answered Jul 04 '14 at 18:07

With that line :

var filterVal = $(this).text().replace(' ','-');

You are removing the space in the name and change it with a -. But if you look at your class, you'll see that the class is Content Management. There is a space. Just use the - :

<div class="project col-sm-3 Content-Management Photography Mobile-sites"><img src="/images/rou20140613-181.jpg" alt="rou20140613-181" width="262" height="175"></div>

How do I filter using double words?

1 Answers1