javascript - 隐藏基于指定数据属性的元素

Question

我正在尝试制作一个过滤器，比如基于点击的链接文本，一个 div 将根据其与当前点击元素匹配的数据名字属性隐藏，但遗憾的是没有工作，下面是我的代码片段。任何线索、想法、建议、帮助、建议将不胜感激，谢谢!

$(document).ready(function(){
  $("a").click(function(){
    var thistext = $(this).text();
    //hide all div first
    $("div").hide();
    //show the div that has the match data-firstletter content of the selected link text
    $("div[data-firstletter='" + thistext +"' ]").hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>

<div data-firstletter="A">
a box that has a data firstletter attribute of A
</div>

<div data-firstletter="A">
a box that has a data firstletter attribute of A
</div>

<div data-firstletter="A">
a box that has a data firstletter attribute of A
</div>

<div data-firstletter="B">
a box that has a data firstletter attribute of B
</div>

<div data-firstletter="B">
a box that has a data firstletter attribute of B
</div>

<div data-firstletter="C">
a box that has a data firstletter attribute of C
</div>

Answer 1

您在两个对象上都使用了 hide() - 在您通过 data 属性选择的元素上使用了 show()。试试这个:

$(document).ready(function() {
  $("a").click(function() {
    var thistext = $(this).text();
    $("div").hide().filter("[data-firstletter='" + thistext + "']").show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>

<div data-firstletter="A">
  a box that has a data firstletter attribute of A
</div>

<div data-firstletter="A">
  a box that has a data firstletter attribute of A
</div>

<div data-firstletter="A">
  a box that has a data firstletter attribute of A
</div>

<div data-firstletter="B">
  a box that has a data firstletter attribute of B
</div>

<div data-firstletter="B">
  a box that has a data firstletter attribute of B
</div>

<div data-firstletter="C">
  a box that has a data firstletter attribute of C
</div>

请注意，我链接了选择器并使用 filter() 将另一个查询保存到 DOM。