代码是：如果我选中了game复选框，它只会显示带有数据标记的结果＆＃34; game＆＃34;，但我想在数据中有两个或更多值-tag，表示允许同一项的两个或多个类别。
$(document).ready(function() {
$('.category').on('change', function() {
var category_list = [];
$('#filters :input:checked').each(function() {
var category = $(this).val();
category_list.push(category);
});
if (category_list.length == 0)
$('.resultblock').fadeIn();
else {
$('.resultblock').each(function() {
var item = $(this).attr('data-tag');
if (jQuery.inArray(item, category_list) > -1)
$(this).fadeIn('slow');
else
$(this).show();
});
}
});
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="filters">
<div class="filterblock">
<input id="check1" type="checkbox" name="check" value="game" class="category">
<label for="check1">Games</label>
</div>
<div class="filterblock">
<input id="check2" type="checkbox" name="check" value="technology" class="category">
<label for="check2">Technology</label>
</div>
<div class="filterblock">
<input id="check3" type="checkbox" name="check" value="os" class="category">
<label for="check3">Operating System</label>
</div>
</div>
<div class="searchresults">
<div class="resultblock" data-tag="game">
<img src="images/bf.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
Battlefield 4 is a 2013 first-person shooter video game developed by Swedish video game developer EA Digital Illusions CE (DICE) and published by Electronic Arts. It is a sequel to 2011's Battlefield 3 and was released on October 29, 2013 in North America,
October 31, 2013 in Australia, November 1, 2013 in Europe and New Zealand and November 7, 2013 in Japan for Microsoft Windows, PlayStation 3, PlayStation 4, Xbox 360 and Xbox One.
</div>
</div>
</div>
<div class="resultblock" data-tag="os">
<img src="images/osx.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
OS X, formerly known as Mac OS X, is a series of Unix-based graphical interface operating systems developed and marketed by Apple Inc. It is designed to run on Mac computers, having been pre-installed on all Macs since 2002. It was the successor to Mac
OS 9, released in 1999, the final release of the "classic" Mac OS, which had been Apple's primary operating system since 1984. The first version released was Mac OS X Server 1.0 in 1999, and a desktop version, Mac OS X v10.0 "Cheetah" followed
on March 24, 2001
</div>
</div>
</div>
<div class="resultblock" data-tag="technology">
<img src="images/php.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. As of January 2013, PHP was installed on more than 240 million websites (39% of those sampled) and 2.1 million web servers. Originally
created by Rasmus Lerdorf in 1994, the reference implementation of PHP (powered by the Zend Engine) is now produced by The PHP Group.
</div>
</div>
</div>
<div class="resultblock" data-tag="game">
<img src="images/cod.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
Call of Duty: Advanced Warfare is a first-person shooter video game published by Activision. Released on November 4, 2014, Sledgehammer Games developed the Microsoft Windows, PlayStation 4 and Xbox One versions of the game, while High Moon Studios developed
the versions released on PlayStation 3 and Xbox 360.
</div>
</div>
</div>
<div class="resultblock" data-tag="technology">
<img src="images/jquery.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. Used by over 60% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. jQuery is free, open-source software
licensed under the MIT License.
</div>
</div>
</div>
<div class="resultblock" data-tag="os">
<img src="images/linux.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
Linux is a Unix-like and mostly POSIX-compliant computer operating system assembled under the model of free and open-source software development and distribution. The defining component of Linux is the Linux kernel, an operating system kernel first released
on 5 October 1991 by Linus Torvalds. The Free Software Foundation uses the name GNU/Linux to describe the operating system, which has led to some controversy.
</div>
</div>
</div>
<div class="resultblock" data-tag="technology">
<img src="images/net.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
The domain name net is a generic top-level domain (gTLD) used in the Domain Name System of the Internet. The name is derived from network, indicating it was originally intended for organizations involved in networking technologies, such as Internet service
providers and other infrastructure companies. However, restrictions were never enforced and the domain is now a general purpose name space. It is still popular with network operators, and is often treated as an alternative to com.
</div>
</div>
</div>
<div class="resultblock" data-tag="game">
<img src="images/nfs.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
Need for Speed: The Run is a racing video game, the eighteenth title in the long-running Need for Speed franchise, and developed by EA Black Box and published by Electronic Arts. The Wii and 3DS versions were developed by Firebrand Games, the team behind
Undercover and Nitro (both DS versions). It was released in North America on November 15, 2011 and November 18, 2011 in Europe.
</div>
</div>
</div>
<div class="resultblock" data-tag="os">
<img src="images/windows.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
Microsoft Windows or Windows is a metafamily of graphical operating systems developed, marketed, and sold by Microsoft. It consists of several families of operating systems, each of which cater to a certain sector of the computing industry. Active Windows
families include Windows NT, Windows Embedded and Windows Phone; these may encompass subfamilies, e.g. Windows Embedded Compact (Windows CE) or Windows Server. Defunct Windows families include Windows 9x and Windows Mobile.
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
在data-tag属性中添加以逗号或空格分隔的类别。检查所选类别列表（来自check-boxes）是否与每个项目的data-tag中的任何类别相匹配。
我使用Array.some()函数来测试这个条件：
$('.resultblock').each(function() {
// get the data-tag attributes eg. "game,os"
var item = $(this).attr('data-tag');
var check = category_list.some(function(curr) {
// make a regex for each value of the list selected from checkbox
var pattern = new RegExp(curr, 'i'); // --> /game/i
return pattern.test(item); // --> /game/i.test("game,os")
});
if (check) {
$(this).fadeIn('slow');
} else {
$(this).fadeOut(); // hide the other results
}
});
此外，添加了一些css只是为了明显区分这三个类别：
/* os have red border */ /* technology has bg color */ /* game has different font */
以下是完整的工作片段：
$(document).ready(function() {
$('.category').on('change', function() {
var category_list = [];
$('#filters :input:checked').each(function() {
var category = $(this).val();
category_list.push(category);
});
if (category_list.length == 0) {
$('.resultblock').fadeIn();
} else {
$('.resultblock').each(function() {
var item = $(this).attr('data-tag');
var check = category_list.some(function(curr) {
var pattern = new RegExp(curr, 'i');
return pattern.test(item);
});
if (check) {
$(this).fadeIn('slow');
} else {
$(this).fadeOut();
}
});
}
});
});/* os have red border */
.resultblock[data-tag*="os"] {
border: 2px solid red;
}
/* technology has bg color */
.resultblock[data-tag*="technology"] {
background-color: yellow
}
/* game has different font */
.resultblock[data-tag*="game"] {
color: blue;
font-size: 20px;
font-weight: bold;
}
.resultblock {
margin: 5px 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="filters">
<div class="filterblock">
<input id="check1" type="checkbox" name="check" value="game" class="category">
<label for="check1">Games</label>
</div>
<div class="filterblock">
<input id="check2" type="checkbox" name="check" value="technology" class="category">
<label for="check2">Technology</label>
</div>
<div class="filterblock">
<input id="check3" type="checkbox" name="check" value="os" class="category">
<label for="check3">Operating System</label>
</div>
</div>
<div class="searchresults">
<div class="resultblock" data-tag="game,os,technology">
<img src="images/bf.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
Battlefield 4 is a 2013 first-person shooter video game developed by Swedish video game developer EA Digital Illusions CE (DICE) and published by Electronic Arts. It is a sequel to 2011's Battlefield 3 and was released on October 29, 2013 in North America,
October 31, 2013 in Australia, November 1, 2013 in Europe and New Zealand and November 7, 2013 in Japan for Microsoft Windows, PlayStation 3, PlayStation 4, Xbox 360 and Xbox One.
</div>
</div>
</div>
<div class="resultblock" data-tag="os">
<img src="images/osx.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
OS X, formerly known as Mac OS X, is a series of Unix-based graphical interface operating systems developed and marketed by Apple Inc. It is designed to run on Mac computers, having been pre-installed on all Macs since 2002. It was the successor to Mac
OS 9, released in 1999, the final release of the "classic" Mac OS, which had been Apple's primary operating system since 1984. The first version released was Mac OS X Server 1.0 in 1999, and a desktop version, Mac OS X v10.0 "Cheetah" followed
on March 24, 2001
</div>
</div>
</div>
<div class="resultblock" data-tag="technology">
<img src="images/php.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. As of January 2013, PHP was installed on more than 240 million websites (39% of those sampled) and 2.1 million web servers. Originally
created by Rasmus Lerdorf in 1994, the reference implementation of PHP (powered by the Zend Engine) is now produced by The PHP Group.
</div>
</div>
</div>
<div class="resultblock" data-tag="game">
<img src="images/cod.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
Call of Duty: Advanced Warfare is a first-person shooter video game published by Activision. Released on November 4, 2014, Sledgehammer Games developed the Microsoft Windows, PlayStation 4 and Xbox One versions of the game, while High Moon Studios developed
the versions released on PlayStation 3 and Xbox 360.
</div>
</div>
</div>
<div class="resultblock" data-tag="technology">
<img src="images/jquery.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. Used by over 60% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. jQuery is free, open-source software
licensed under the MIT License.
</div>
</div>
</div>
<div class="resultblock" data-tag="os">
<img src="images/linux.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
Linux is a Unix-like and mostly POSIX-compliant computer operating system assembled under the model of free and open-source software development and distribution. The defining component of Linux is the Linux kernel, an operating system kernel first released
on 5 October 1991 by Linus Torvalds. The Free Software Foundation uses the name GNU/Linux to describe the operating system, which has led to some controversy.
</div>
</div>
</div>
<div class="resultblock" data-tag="technology">
<img src="images/net.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
The domain name net is a generic top-level domain (gTLD) used in the Domain Name System of the Internet. The name is derived from network, indicating it was originally intended for organizations involved in networking technologies, such as Internet service
providers and other infrastructure companies. However, restrictions were never enforced and the domain is now a general purpose name space. It is still popular with network operators, and is often treated as an alternative to com.
</div>
</div>
</div>
<div class="resultblock" data-tag="game, os">
<img src="images/nfs.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
Need for Speed: The Run is a racing video game, the eighteenth title in the long-running Need for Speed franchise, and developed by EA Black Box and published by Electronic Arts. The Wii and 3DS versions were developed by Firebrand Games, the team behind
Undercover and Nitro (both DS versions). It was released in North America on November 15, 2011 and November 18, 2011 in Europe.
</div>
</div>
</div>
<div class="resultblock" data-tag="os, technology">
<img src="images/windows.jpg" class="itemimg">
<div class="desc">
<div class="desc_text">
Microsoft Windows or Windows is a metafamily of graphical operating systems developed, marketed, and sold by Microsoft. It consists of several families of operating systems, each of which cater to a certain sector of the computing industry. Active Windows
families include Windows NT, Windows Embedded and Windows Phone; these may encompass subfamilies, e.g. Windows Embedded Compact (Windows CE) or Windows Server. Defunct Windows families include Windows 9x and Windows Mobile.
</div>
</div>
</div>
</div>
</div>