7

.html 文件：

<div class="test" data-word="AAA" data-type="T" data-number="1"> Text 1 </div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2"> Text 2 </div>
<div class="test" data-word="AAA" data-type="CCC" data-number="2"> Text 3 </div>
<div class="test" data-word="D" data-type="BBB" data-number="6"> Text 4 </div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2"> Text 6 </div>
<div class="test" data-word="G" data-type="R" data-number="5"> Text 7 </div>
<div class="test" data-word="H" data-type="BBB" data-number="1"> Text 5 </div>
<div class="test" data-word="AAA" data-type="R" data-number="9"> Text 8 </div>

我需要根据属性隐藏和显示元素。假设我需要显示带有单词 AAA 和类型 BBB 和数字 2 的元素。必须显示具有这些属性的所有元素，并且应该使用 hide 和 show 方法隐藏其他元素。帮助？

4

5 回答 5

4

您可以使用属性等于选择器选择元素：

$('.test').hide().filter('[data-word="AAA"][data-type="BBB"][data-number="2"]').show();

首先隐藏所有，然后过滤并显示必要的。检查下面的演示。

$('.test').hide().filter('[data-word="AAA"][data-type="BBB"][data-number="2"]').show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" data-word="AAA" data-type="T" data-number="1"> Text 1 </div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2"> Text 2 </div>
<div class="test" data-word="AAA" data-type="CCC" data-number="2"> Text 3 </div>
<div class="test" data-word="D" data-type="BBB" data-number="6"> Text 4 </div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2"> Text 6 </div>
<div class="test" data-word="G" data-type="R" data-number="5"> Text 7 </div>
<div class="test" data-word="H" data-type="BBB" data-number="1"> Text 5 </div>
<div class="test" data-word="AAA" data-type="R" data-number="9"> Text 8 </div>

于 2014-12-22T19:58:06.853 回答
3

您可以仅基于选择器来执行此操作。对于代码更友好的方法，请使用过滤器函数并使用 jquerydata函数读取数据。从隐藏的元素开始并显示过滤结果。

$('div.test').hide().filter(function(){
    var d = $(this).data();
    return d.word == 'AAA' && d.type == 'BBB' && d.number === 2;
}).show();

小提琴示例

于 2014-12-22T20:00:18.147 回答
1

由于我不能删除我的答案，不能使用属性选择器或过滤器功能，我必须想出方法 3，只是为了好玩：

$(function() {
  $(".test").each(function() {
    var d = $(this).data();
    $(this).toggle(d.word === "AAA" && d.type === "BBB" && d.number === 2);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="test" data-word="AAA" data-type="T" data-number="1">Text 1</div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2">Text 2</div>
<div class="test" data-word="AAA" data-type="CCC" data-number="2">Text 3</div>
<div class="test" data-word="D" data-type="BBB" data-number="6">Text 4</div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2">Text 6</div>
<div class="test" data-word="G" data-type="R" data-number="5">Text 7</div>
<div class="test" data-word="H" data-type="BBB" data-number="1">Text 5</div>
<div class="test" data-word="AAA" data-type="R" data-number="9">Text 8</div>

于 2014-12-22T20:07:11.603 回答
1 
$('form')
    .children().data( { word: [ 'AAA','BBB' ], number: [2] } ).show();
于 2018-06-08T11:53:36.190 回答
0

尝试

$(".test").data("data-word")

获得您需要的价值并建立逻辑

于 2014-12-22T20:03:38.780 回答