更新：Jared 的答案是解决方案 - 这是我的代码，如果确实存在匹配集，我刚刚添加了 else 语句来执行列表项的隐藏/显示。
$(document).ready(function() {
$("form#filterForm").submit(function () {
var type = $("select#typeList option:selected").val();
var style = $("select#styleList option:selected").val();
var items = $(".container .content ul li").filter('.' + type + '.' + style);
if (!items.length) {
alert('no items...');
return false;
} else {
$(".container .content ul li").hide();
$(".container .content ul li"+type+style).show();
mCustomScrollbars();
return false;
}
});
});
结束更新。我有一些代码可以工作，但我无法将其带到最后一步。我有一个无序列表中的缩略图列表。
<div class="content">
<ul>
<li class="portfolio_images type-portfolio_images category-commercial category-traditional"><img src="thumb_test-image1.jpg" /></li><li class="portfolio_images category-residential category-contemporary"><img src="thumb_test-image2.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial category-contemporary"><img src="thumb_test-image3.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial" ><img src="res1-2-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design"><img src="res1-2-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design"><img src="res3-3-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-residential category-contemporary" ><img src="thumb_test-image2.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial category-traditional"><img src="thumb_test-image1.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design" ><img src="res1-2-THUMB.jpg" /></li><li class="portfolio_images type-portfolio_images category-commercial category-contemporary"><img src="thumb_test-image3.jpg" /></li><li class="portfolio_images type-portfolio_images category-interior-design"><img src="res1-2-THUMB.jpg" /></li>
</ul>
</div>
每个列表项将有多个类别。我有一个带有 2 个选择字段的表单，我正在使用 jQuery 获取选择字段的值，这些字段对应于列表项中的类名 - 这些被设置为变量并用于相应地显示和隐藏列表项.
<form id="filterForm" action="">
<select id="typeList" name="typeList">
<option value=".portfolio_images">All</option>
<option value=".category-commercial">category-commercial</option>
<option value=".category-residential">category-residential</option>
</select>
<select id="styleList" name="typeList">
<option value=".type-portfolio_images">All</option>
<option value=".category-traditional">category-traditional</option>
<option value=".category-contemporary">category-contemporary</option>
</select>
<input id="submit_btn" type="submit" value="submit" label="submit" /> </form>
<script>
$(document).ready(function() {
$("form#filterForm").submit(function () {
var $selectTypeClass=$("select#typeList option:selected").val();
var $selectStyleClass=$("select#styleList option:selected").val();
$(".container .content ul li").not($selectTypeClass+$selectStyleClass).hide();
$(".container .content ul li"+$selectTypeClass+$selectStyleClass).show();
mCustomScrollbars();
return false;
});
});
</script>
这真的很好用。但是，在某些情况下，一个项目将具有一个类别，而没有另一个类别：例如，它可能具有“类别-传统”而不是“类别-住宅”。所以我要做的是测试或检查是否有没有与两个选定的类匹配的项目，以显示警报消息（“没有一个项目与两个选择匹配，等等”）。否则，如果有任何两者都匹配，请继续并正常执行该功能。
我遇到了麻烦，因为我尝试使用 each() 进行测试，但这不起作用，因为它会循环遍历列表并始终返回警报 - 因为它基本上在第一个停止
那么我将如何设置它以检查所有项目是否与两个选定的类匹配？我是否必须以某种方式索引整个集合并将其作为一个整体进行检查，而不是使用 each() 发生的迭代？在这里难住 - 任何帮助，我提前谢谢你。