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

Question

我想基于点击的链接文本做一个过滤器的事情，一个div将隐藏在它的data-firstname属性上，它与当前点击元素相匹配，但可悲地没有被隐藏工作，下面是我的片段。任何线索，想法，建议，帮助，建议将不胜感激，谢谢！

$(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。