我是Jquery的一个完整的新手，但是我一直试图阅读并破解这段代码，但我无处可去。
我被困在这个模板上，让过滤器一次匹配多个数据过滤器。
我试图让图像在数字和响应中都可见。
下面设置为＆＃34; digital＆＃34;，但是有没有办法让它一次在多个数据过滤器上激活？
我觉得如果我更多地掌握了我所缺少的东西，我可能能够弄明白。再说一次，对于像我这样的新手来说可能会很复杂。
感谢您抽出宝贵时间来了解一下。
该网站位于http://madethis.media，如果有更多帮助的话。
$( '.project-filters a' ).click( function(el) {
el.preventDefault();
var filter = $( this ).data( 'filter' );
$( '.project-filters a' ).removeClass( 'active' );
$( this ).addClass( 'active' );
if( filter != 'all') {
$( '.project' ).removeClass( 'inactive' ).not('[data-filter="' + filter + '"]' ).addClass( 'inactive' );
}
else {
$( '.project' ).removeClass( 'inactive' );
}
});.projects .project-filters {
text-align: center;
margin: 0 auto;
padding: 20px 5%;
list-style-type: none;
border-top: 1px solid #f5f5f5;
}
.projects .project-filters > li {
display: inline;
font-size: 12px;
font-size: 0.750rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.projects .project-filters > li + li {
margin-left: 15px;
}
.projects .project-filters > li a {
color: #000;
font-weight: 700;
text-decoration: none;
}
.projects .project-filters > li a.active {
color: #fff;
background-color:#feeb00;
padding:16pt;
text-shadow: 1pt 1pt #cfae18;
}
.projects .project-filters > li a:hover {
color: #6c6c6c;
}
.projects .project {
position: relative;
overflow: hidden;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.projects .project.inactive {
opacity: 0.3;
}
.projects .project:hover {
opacity: 1;
}
.projects .project .project-thumb img {
width: 100%;
height: auto;
}
.projects .project .project-overlay {
position: absolute;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-size: 14px;
text-align: center;
background-color: #feeb00;
opacity: 0;
}
.projects .project .project-overlay .project-links {
width: 90%;
height: 44px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.projects .project .project-overlay a {
display: inline-block;
height: 40px;
width: 40px;
margin: 0 5px;
color: #000;
text-align: center;
text-decoration: none;
border: 2px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.projects .project .project-overlay a i.fa {
line-height: 36px;
}
.projects .project .project-overlay a:hover {
color: #fff;
border-color: #fff;
}
.projects .project .project-gallery {
display: none;
}
.projects .project .project-info {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="row no-gutter projects">
<!-- Start: Filters -->
<ul class="project-filters">
<li><a href="#" data-filter="all" class="active" title="All">All</a></li>
<li><a href="#" data-filter="digital" title="Digital">Digital</a></li>
<li><a href="#" data-filter="print" title="Print">Print</a></li>
<li><a href="#" data-filter="branding" title="Branding">Branding</a></li>
<li><a href="#" data-filter="responsive" title="responsive">Responsive</a></li>
</ul>
<!-- End: Filters -->
<!-- Start: Project -->
<div class="col-xs-6 col-md-4 project" data-filter="digital">
<div class="project-thumb"><img src="assets/img/projects/digital-responsive-1-thumb.jpg" alt=""></div>
<!-- Project Overlay -->
<div class="project-overlay">
<div class="project-links">
<a href="assets/img/projects/digital-1-jdf-a.jpg" title="JD Fitness + Nutrition" class="lightbox" data-gall="project-JDFN"><i class="fa fa-search"></i></a>
<a href="#project-JDFN-info" data-type="inline" class="info-link"><i class="fa fa-align-left"></i></a>
</div>
</div>
<!-- Project Info / Targeted by ID -->
<div class="project-info" id="project-JDFN-info">
<div class="container-fluid">
<div class="row">
<div class="col-sm-7">
<h4 class="small-headline">Wordpress Site: <br>
JD Fitness + Nutrition</h4>
<p>The ideation was centred around existing face to face customers mirgating to the online service. <br>
The site is accessed in various enviroments (at home, on the go, or in the gym) by users with varying computer skills. It employs minial navigation enabling basic users to stay on course while journeying through the site.<br><br>
Instrustions on how Online Personal Training and its benifits are all housed under the services and prices tab, which employs a simple yet elegant touch ready sub-navigation presenting all the relevant information in bitesize chunks with virtually no scrolling needed on any device.
</p>
<h5>Skills Used</h5>
<p>Wordpress - HTML - CSS - Slider Revolution - Photoshop - Illustrator.</p>
</div>
<div class="h-spacer visible-xs-block"></div>
<div class="col-sm-4 col-sm-offset-1">
<strong>Client</strong>
<p><img src="assets/img/projects/jdflogo_dark_tiny.png" alt="J.FD Fitness & Nutrition Logo"></p>
<hr class="sep">
<strong>Project type</strong>
<p>Digital - Reponsive</p>
<hr class="sep">
<strong>Live link</strong>
<h5><a href="www.joshdavies.co.uk " target="_blank">http://joshdavies.co.uk/</a></h5>
</div>
</div>
</div>
</div>
</div>
<!-- End: Project -->
答案 0 :(得分：0)
如果您想切换过滤并在项目上拥有多个过滤器，可以试试这个：
var filters = [];
$( '.project-filters a' ).click( function(el) {
el.preventDefault();
var filter = $( this ).data( 'filter' );
var index = filters.indexOf(filter);
if ( index != -1 ) {
filters.splice(index, 1);
$( this ).removeClass('active');
} else {
$( this ).addClass('active');
}
if ( filter != 'all') {
$( '.project' ).removeClass( 'inactive' )
.not( '[data-filter="' + filters.join('"],[data-filter="') + '"]' )
.addClass( 'inactive' );
}
else {
$( '.project' ).removeClass( 'inactive' );
}
});