0

我正在实施Masonry的修改版本，其中我有一系列照片，可以通过单击页面顶部的过滤器列表进行过滤。当过滤器是像摄影或视频这样的单个词时，过滤器可以正常工作，但是当过滤器包含多个词时，例如“内容管理”，它会“中断”并且不返回任何结果。

这是过滤器代码：

<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>

这是内容，包括用作过滤条件的类值。

<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>

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

我尝试将类值用单引号括起来：'class name' 但这没有帮助。

除了将所有过滤器值设为单个词之外，还有哪些其他选项可以使多词过滤器值返回结果？

谢谢。

4

1 回答 1

2

用那条线：

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

您正在删除名称中的空格并使用-. 但是，如果您查看您的班级，您会发现班级是Content Management. 有一个空间。只需使用-：

<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>
于 2014-07-04T18:07:56.197 回答