jquery - jQuery 读取数据属性，隐藏/显示正确的 div

Question

我试图在行上制作一个带有数据属性的表格，并且能够在点击时显示具有相同数据属性的 div。如果它使 jquery 功能更容易/更智能，我可以添加更多数据属性。

需要一些帮助才能让一切都变得美好:)

提前致谢！

编辑：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>

Answer 1

你当然可以！

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

如果您想通过他的任何属性（数据属性或非数据属性）选择一个元素，请使用符号

$("[attr_name=value]")

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

编辑：看看这是否是你想要的

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