javascript - 使用 jQuery过滤元素
问题描述
当我在没有图像的情况下运行相同的代码时,例如在 li 上给出一些文本会给我结果,但是当我放置图像时。这没用。这里有任何建议--`
这里我正在尝试使用列表,但在实际项目中,我有一个包含 3 行的表格,按 3 个不同的类名分类,每个表格行中有 4 个图像。如何仅获取选定的元素组
$("button").click(function(){
//remove selected class from all buttons
$("button").removeClass("selected");
//add selected class only to clicked button
$(this).addClass("selected");
//get data type filter
var dataFilter = $(this).data('filter');
//if data filter is all show all of them
if(dataFilter == "all") {
$(".elements li").show();
}
else
{
//else hide all of them and show only the one with correct data filter
$(".elements li").hide();
$("." + dataFilter).show();
}
});
li{
display: inline;
list-style: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="filters">
<button class="selected" data-filter="all">Show All</button>
<button data-filter="type-one">Show One</button>
<button data-filter="type-two">Show Two</button>
</div>
<tr class="people">
<td><img src="./thumbs/anil_tn.jpg" alt="anil1" class="gallery_image"></td>
<td><img src="./thumbs/kapri_tn.jpg" alt="anil2" class="gallery_image"></td>
<td><img src="./thumbs/me.jpg" alt="anil3" class="gallery_image"></td>
<td><img src="./thumbs/pandey_tn.jpg" alt="anil4" class="gallery_image"></td>
</tr>
<tr class="nature">
<td><img src="./thumbs/best_tn.jpg" alt="anil5" class="gallery_image"></td>
<td><img src="./thumbs/ny_tn.jpg" alt="anil6" class="gallery_image"></td>
<td><img src="./images/talo.jpg" alt="anil7" class="gallery_image"></td>
<td><img src="./images/turku.jpg" alt="anil8" class="gallery_image"></td>
</tr>
?
解决方案
像这样的东西?其中按钮过滤people
或过滤nature
,然后表格是应该过滤的.elements
每一行。class
$("button").click(function(){
$("button").removeClass("selected");
$(this).addClass("selected");
var dataFilter = $(this).data('filter');
if(dataFilter == "all") {
$(".elements tr").show();
}
else
{
$(".elements tr").hide();
$("." + dataFilter).show();
}
});
li{
display: inline;
list-style: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="filters">
<button class="selected" data-filter="all">Show All</button>
<button data-filter="people">Show One</button>
<button data-filter="nature">Show Two</button>
</div>
<table class="elements">
<tr class="people">
<td><img src="./thumbs/anil_tn.jpg" alt="anil1" class="gallery_image"></td>
<td><img src="./thumbs/kapri_tn.jpg" alt="anil2" class="gallery_image"></td>
<td><img src="./thumbs/me.jpg" alt="anil3" class="gallery_image"></td>
<td><img src="./thumbs/pandey_tn.jpg" alt="anil4" class="gallery_image"></td>
</tr>
<tr class="nature">
<td><img src="./thumbs/best_tn.jpg" alt="anil5" class="gallery_image"></td>
<td><img src="./thumbs/ny_tn.jpg" alt="anil6" class="gallery_image"></td>
<td><img src="./images/talo.jpg" alt="anil7" class="gallery_image"></td>
<td><img src="./images/turku.jpg" alt="anil8" class="gallery_image"></td>
</tr>
</table>
推荐阅读
- amazon-web-services - 基于 JSON 结构更新数据框中的值
- reactjs - 由于有时会在我的 UI 中加载数据,因此我对初始结果进行了硬编码以避免出现空白屏幕,我们是否有适当的解决方案?
- android - 错误:包路径无效。有效的系统映像路径是:ository... null
- c++ - 如何关闭每个文件或每个功能的检查?
- huawei-mobile-services - 使用伪类进行卡片开发的案例研究
- mongodb - 在 MongoDb 中存储 IOT 数据
- algorithm - 这个问题是否可以使用多项式时间算法,还是 NP-hard 问题?如果是,有人可以帮我吗?
- firebase - 为什么我从 Firebase 中提取数据时只有 1 个数据?
- reactjs - Elastic Beanstalk - 上传时更改 package.json 中的代理地址
- azure-ad-b2c - Azure AD B2C 登录页面很慢