如何解决表格的jQuery常见问题解答
| 当我按下链接时,将显示所有td \。 按下时如何隐藏和显示每个td? <head>
<style type=\"text/css\">
.details{display:none;}
</style>
<script type=\"text/javascript\">
$().ready(function() {
$(\'a.buy\').click(function() {
$(\'.details\').slideToggle(\'fast\',function() {
});
});
});
</script>
<body>
<table>
<tr>
<td> <a class=\"buy\" href=\"#\">more details</a> </td>
</tr>
<tr>
<td class=\"details\">text 1 text 1 text 1 text 1 </td>
</tr>
<tr>
<td> <a class=\"buy\" href=\"#\">more details</a> </td>
</tr>
<tr>
<td class=\"details\">text 2 text 2 text 2 text 2 </td>
</tr>
<tr>
<td> <a class=\"buy\" href=\"#\">more details</a> </td>
</tr>
<tr>
<td class=\"details\">text 3 text 3 text 3 text 3 </td>
</tr>
</table>
</body>
</html>
解决方法
$(\'.details\')
寻址所有具有此类的单元。您必须专门针对您想要的目标:
$(this) // <-- this is the currently clicked link
.closest(\'tr\') // <-- go up until the next tr
.next() // <-- next tr
.find(\'td.details\').show(); // <-- show the cell there
如果要隐藏所有其他对象,则可以在显示所需的对象之前将其全部隐藏:
$(\'.details\').hide();
// then the above
这并不是特别出色,但是可以完成工作。
, 您可以使用.closest()和.find()jQuery函数来实现此目的。这是jsfiddle中的工作示例
, 在HTML中使用<dl> <dt> <dd>
(最合适)
的HTML
<dl class=\"faq\">
<span style=\"font-size: 14px; \">
<span class=\"Apple-style-span\" style=\"font-family: Verdana,Geneva,sans-serif; \">
<dt><span style=\"color: rgb(10,171,253); \">Question?</dt>
<dd>Answer.<a class=\"close\" href=\"#\">Close Text</a></dd>
</span>
</span>
</dl>
jQuery的
$(\'.faq dd\').hide();
$(\'.faq dt\').click(function(){
$(this).next(\'dd\').slideToggle(\'slow\');
});
$(\'a.close\').click(function (){ $(this).parent(\'dd\').slideUp(\'slow\'); });
演示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。