更新: 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获取select字段的值,这些字段对应于list-items中的classNames - 这些字段设置为变量并用于相应地显示和隐藏列表项
<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>
这非常有效。但是,我有一些情况,一个项目将有一个类别,而不是另一个:例如,它可能有'category-traditional'但不'category-residential'。所以我要做的是测试或检查是否有没有与所选类别相匹配的项目,以显示警告消息(“没有任何项目匹配两个选项,等等”)。否则,如果两者都匹配,请继续正常执行该功能。
我遇到了麻烦,因为我尝试使用each()进行测试,但这不起作用,因为它会循环遍历列表并始终返回警报 - 因为它基本上停在第一个
那么我该如何进行设置以检查是否所有项目都与所选类别相匹配?我是否必须以某种方式对整个集合进行索引并将其作为一个整体进行检查,而不是每个()发生的迭代?难倒在这里 - 任何帮助,我都提前感谢你。
答案 0 :(得分:2)
您可以在CSS(和Sizzle)选择器中使用多个类,如.class1.class2。只需搜索特定于两个类的元素并测试长度:
$(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...');
}
});
});
答案 1 :(得分:0)
答案 2 :(得分:0)
您可以使用$.filter(function(index))
函数来计算具有多个类的元素,然后将计数与完整的项目列表进行比较。
有多个班级的元素
var filtered = $('#foo li').filter(function() {
return this.className.trim().indexOf(' ') > 0;
});
因为这只是检查每个元素的className属性中是否有空格,请注意使用trim()
以确保我们不返回具有额外空格的元素,即class="foo "
。< / p>