我正在尝试制作一个在行上包含数据属性的表格,并且能够在单击时显示具有相同数据属性的 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>
最佳答案
当然可以!
$(".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/
关于jQuery 读取数据属性,隐藏/显示正确的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7785631/