隱藏基於指定數據屬性的元素

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。