我需要根据用户选择的标签过滤表格中的行。
我使用标签数组来定位行的类别，我试图隐藏 sibling 但它不起作用，如果有不止一行，它会隐藏所有内容，如果用户删除一个标签，我需要重新显示其他行，但我没能找到如何做到这一点。
(function($, root, undefined) {
$(function() {
'use strict';
// Disponibilités
$('.ui.dropdown').dropdown();
$('.dropdown').on('click', function(e) {
var filters = $("input[name='filters']").val();
var arrayFilters = filters.split(',');
if (filters) {
$.each(arrayFilters, function(index, value) {
$('.' + value).siblings().hide();
});
} else {
$('.uniteRow').show();
}
});
});
})(jQuery, this);<!DOCTYPE html>
<html>
<head>
<style>
table td {
padding: 5px;
}
</style
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<div class="filters">
<div class="ui multiple dropdown">
<input type="hidden" name="filters">
<i class="filter icon"></i>
<span class="text">Filter les résultats</span>
<div class="menu">
<div class="divider"></div>
<div class="header">
Disponibilité
</div>
<div class="scrolling menu">
<div class="item" data-value="disponiblebientot">
Disponible bientôt
</div>
<div class="item" data-value="juillet2020">
Juillet 2020
</div>
<div class="item" data-value="loue">
Loué
</div>
</div>
<div class="divider"></div>
<div class="header">
Pièces
</div>
<div class="scrolling menu">
<div class="item" data-value="pieces3">
3 ½
</div>
<div class="item" data-value="pieces4">
4 ½
</div>
<div class="item" data-value="pieces5">
5 ½
</div>
</div>
</div>
</div>
</div>
<table class="disponibilites">
<tbody>
<tr>
<td></td>
<td>Pièces</td>
<td>Disponibilité</td>
</tr>
<tr class="uniteRow loue pieces4">
<td>101</td>
<td>4½</td>
<td>Loué</td>
</tr>
<tr class="uniteRow disponiblebientot pieces4">
<td>102</td>
<td>4½</td>
<td>Disponible bientôt</td>
</tr>
<tr class="uniteRow loue pieces4">
<td>103</td>
<td>4½</td>
<td>Loué</td>
</tr>
<tr class="uniteRow loue pieces3">
<td>104</td>
<td>3½</td>
<td>Loué</td>
</tr>
<tr class="uniteRow loue pieces3">
<td>105</td>
<td>3½</td>
<td>Loué</td>
</tr>
<tr class="uniteRow juillet2020 pieces3">
<td>106</td>
<td>3½</td>
<td>Juillet 2020</td>
</tr>
<tr class="uniteRow juillet2020 pieces4">
<td>718</td>
<td>4½</td>
<td>Juillet 2020</td>
</tr>
</tbody>
</table>
</body>
</html>所以我只想显示该类在 arrayFilters 中的行，并隐藏那些不存在的行，并且我希望它在每次选择/取消选择标签时更新。
最佳答案
所以我修改了我的代码以循环遍历行而不是数组，并将数据值更改为类以使用 .is()。
我检查每行是否在过滤器中有一个类并显示它，如果没有类与过滤器匹配则隐藏该行。
(function ($, root, undefined) {
$(function () {
'use strict';
// Disponibilités
$('.ui.dropdown').dropdown();
$('.dropdown').on('click', function(e) {
var filters = $( "input[name='filters']" ).val();
if(filters) {
$('.uniteRow').each(function (index, value) {
if($(this).is(filters)) {
$(this).show();
} else {
$(this).hide();
}
});
} else {
$('.uniteRow').show();
}
});
});
})(jQuery, this);<!DOCTYPE html>
<html>
<head>
<style>
table td {
padding: 5px;
}
</style
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<div class="filters">
<div class="ui multiple dropdown">
<input type="hidden" name="filters">
<i class="filter icon"></i>
<span class="text">Filter les résultats</span>
<div class="menu">
<div class="divider"></div>
<div class="header">
Disponibilité
</div>
<div class="scrolling menu">
<div class="item" data-value=".disponiblebientot">
Disponible bientôt
</div>
<div class="item" data-value=".juillet2020">
Juillet 2020
</div>
<div class="item" data-value=".loue">
Loué
</div>
</div>
<div class="divider"></div>
<div class="header">
Pièces
</div>
<div class="scrolling menu">
<div class="item" data-value=".pieces3">
3 ½
</div>
<div class="item" data-value=".pieces4">
4 ½
</div>
<div class="item" data-value=".pieces5">
5 ½
</div>
</div>
</div>
</div>
</div>
<table class="disponibilites">
<tbody>
<tr>
<td></td>
<td>Pièces</td>
<td>Disponibilité</td>
</tr>
<tr class="uniteRow loue pieces4">
<td>101</td>
<td>4½</td>
<td>Loué</td>
</tr>
<tr class="uniteRow disponiblebientot pieces4">
<td>102</td>
<td>4½</td>
<td>Disponible bientôt</td>
</tr>
<tr class="uniteRow loue pieces4">
<td>103</td>
<td>4½</td>
<td>Loué</td>
</tr>
<tr class="uniteRow loue pieces3">
<td>104</td>
<td>3½</td>
<td>Loué</td>
</tr>
<tr class="uniteRow loue pieces3">
<td>105</td>
<td>3½</td>
<td>Loué</td>
</tr>
<tr class="uniteRow juillet2020 pieces3">
<td>106</td>
<td>3½</td>
<td>Juillet 2020</td>
</tr>
<tr class="uniteRow juillet2020 pieces4">
<td>718</td>
<td>4½</td>
<td>Juillet 2020</td>
</tr>
</tbody>
</table>
</body>
</html>关于javascript - 如何隐藏/显示基于数组的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57187621/