jQuery讀取數據屬性，隱藏/顯示正確的div

我試圖製作一個具有行數據屬性的表格，並且能夠在點擊時顯示具有相同數據屬性的div。我可以添加更多的數據屬性，如果它使jQuery的功能更容易/更聰明。jQuery讀取數據屬性，隱藏/顯示正確的div

需要一些幫助，使一切發揮很好:)

在此先感謝！

編輯：的jsfiddle鏈接：http://jsfiddle.net/MXpnQ/

$(".productRow").click(function() { 
$(this).parent().hide("slow"); //hides the fundListContainer 
--function to show the correct fundInfoContainer--? 
}); 

$(".backToCorrectListButton").click(function() { 
--function to hide the fundInfoContainer and show the correct fundListContainer--? 
}); 

<div class="fundListContainer"> 
<table> 
<tr class="productRow" data-fundId="1"> 
    <td></td> 
    <td></td> 
</tr> 
<tr class="productRow" data-fundId="2"> 
    <td></td> 
    <td></td> 
</tr> 
</table> 
</div> 

<div class="fundInfoContainer" data-fundId="1" style="display: none"> 
<div class="backToCorrectListButton">back to list</div> 
</div> 

<div class="fundInfoContainer" data-fundId="2" style="display: none"> 
<div class="backToCorrectListButton">back to list</div> 
</div>

來源

2011-10-16 Emin

當然可以！

$(".productRow").click(function() { 
    $(this).parent().hide("slow"); //hides the fundListContainer 
    $("[data-fundId="+$(this).data('fundId')+"]").hide(); 
});

如果您想通過他的任何屬性選擇一個元素（數據：attr或不能）用符號

$("[attr_name=value]")

見http://api.jquery.com/attribute-equals-selector/

編輯：你看，如果這是你要

http://jsfiddle.net/MXpnQ/3/

來源

2011-10-16 16:30:54

我需要顯示fundInfoContainer所以我常將你的代碼從「隱藏」編輯爲「顯示」。但它不起作用。 – Emin

我不確定這部分是否工作： $（this）.data（'fundId'） – Emin

這是因爲它不會收集TR中數據屬性的數據。 – Emin

jQuery讀取數據屬性，隱藏/顯示正確的div

回答

相關問題