Question

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方法隐藏其他元素。帮助

Answer 1

您可以使用attribute equals选择器选择元素：

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

<强> Fiddle Example

Answer 3

^{由于我无法删除我的答案而无法使用属性选择器或过滤器功能，所以我必须提出方法编号3，只是为了它的乐趣：}

＆＃13;

$(function() {
  $(".test").each(function() {
    var d = $(this).data();
    $(this).toggle(d.word === "AAA" && d.type === "BBB" && d.number === 2);
  });
});

＆＃13;

<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>

＆＃13;

Answer 4

$('form')
    .children().data( { word: [ 'AAA','BBB' ], number: [2] } ).show();

Answer 5

尝试

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

获取您需要的值并加上逻辑

jquery基于html5数据属性显示和隐藏

5 个答案: