JQuery 单击时切换行
我试图在单击具有特定 id 的行时隐藏/显示行的子集。
通过大量的网络搜索和尝试，我得到了下面的代码。
唯一的问题是，由于某种原因，此代码仅隐藏/显示第一组行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#rowToClick').click(function ()
{
$(this).nextAll('tr').each( function()
{
if ($(this).is('#rowToClick'))
{
return false;
}
$(this).toggle();
});
});
});
</script>
</head>
<body>
<table>
<tr id="rowToClick"><td>ClickMe</td></tr>
<tr id="Tr1"><td>Toggled</td></tr>
<tr id="Tr2"><td>Toggled</td></tr>
<tr id="Tr3"><td>Toggled</td></tr>
<tr id="Tr4"><td>Toggled</td></tr>
<tr id="Tr5"><td>Toggled</td></tr>
<tr id="rowToClick"><td>ClickMe</td></tr>
<tr id="Tr6"><td>Toggled</td></tr>
<tr id="Tr7"><td>Toggled</td></tr>
<tr id="Tr8"><td>Toggled</td></tr>
<tr id="Tr9"><td>Toggled</td></tr>
<tr id="Tr10"><td>Toggled</td></tr>
</table>
</body>
</html>
有人有建议和/或可能重写代码吗？
---------- 更新 - 最终解决方案 -----------
我最终根据布兰登的输入得到了下面的解决方案，因为我想做更多具有相同行为的嵌套，有点像可折叠的树视图。 不幸的是，这意味着我必须添加一个额外的属性来跟踪状态，但我现在可以接受它，直到我找到另一种方法（例如检查下一行的可见性）。
$(document).ready(function () {
toggleRows('.module','.namespace');
toggleRows('.namespace','.type');
toggleRows('.type','.member');
});
function toggleRows(parentClass,subClass)
{
$(parentClass).click(function () {
if( $(this).attr("value")=="collapsed")
{
$(this).attr("value","expanded");
$(this).nextUntil(parentClass).filter(subClass).toggle(true);
}
else
{
$(this).attr("value","collapsed");
$(this).nextUntil(parentClass).attr("value","collapsed");
$(this).nextUntil(parentClass).toggle(false);
}
});
}
I'm trying to hide/show a subset of rows when clicking a row with a specific id.
Through a lot of searching the web and a lot of tries I got the code below.
Only problem is this code for some reason only hides/shows the very first set of rows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#rowToClick').click(function ()
{
$(this).nextAll('tr').each( function()
{
if ($(this).is('#rowToClick'))
{
return false;
}
$(this).toggle();
});
});
});
</script>
</head>
<body>
<table>
<tr id="rowToClick"><td>ClickMe</td></tr>
<tr id="Tr1"><td>Toggled</td></tr>
<tr id="Tr2"><td>Toggled</td></tr>
<tr id="Tr3"><td>Toggled</td></tr>
<tr id="Tr4"><td>Toggled</td></tr>
<tr id="Tr5"><td>Toggled</td></tr>
<tr id="rowToClick"><td>ClickMe</td></tr>
<tr id="Tr6"><td>Toggled</td></tr>
<tr id="Tr7"><td>Toggled</td></tr>
<tr id="Tr8"><td>Toggled</td></tr>
<tr id="Tr9"><td>Toggled</td></tr>
<tr id="Tr10"><td>Toggled</td></tr>
</table>
</body>
</html>
Anyone has a suggestion and/or possible rewrite of the code?
---------- Update - Final solution -----------
I ended up with the solution below based on Brandon's input, as I wanted to do more nesting with the same behaviour, kind of like a collapsible tree view.
Unfortunately that meant I had to add an extra attribute to keep track of the state, but I can live with that for now, until I find another way (ex. check visibility of the next row).
$(document).ready(function () {
toggleRows('.module','.namespace');
toggleRows('.namespace','.type');
toggleRows('.type','.member');
});
function toggleRows(parentClass,subClass)
{
$(parentClass).click(function () {
if( $(this).attr("value")=="collapsed")
{
$(this).attr("value","expanded");
$(this).nextUntil(parentClass).filter(subClass).toggle(true);
}
else
{
$(this).attr("value","collapsed");
$(this).nextUntil(parentClass).attr("value","collapsed");
$(this).nextUntil(parentClass).toggle(false);
}
});
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
首先，不能有多行具有相同的 id。不要将 id 设置为“rowToClick”，而是设置 css 类：
接下来，这应该可以工作：
First, you cannot have multiple rows with the same id. Instead of setting id to "rowToClick", set the css class:
Next, this should work:
这是因为 id 属性对于文档中的每个 id 只能使用一次。您应该使用 class 属性，然后在 jquery 代码中，使用 $(".rowToClick") 选择器访问类 rowToClick 的项目。
希望这有帮助。
安迪
this is because the id attribute can only be used once for each id in a document. you should use the class attribute instead, and then in your jquery code, access the items with the class rowToClick with the $(".rowToClick") selector.
Hope this helps.
Andy
看看这个小提琴
使用
:not()选择器，您可以选择所有 < code>tr 没有您想要过滤掉的 id/class 的元素：请注意，您不能有两个具有相同 id 的元素 - 您有两行具有 id
rowToClick。请使用class来代替。Take a look at this fiddle
Using the
:not()selector, you can select alltrelements that do not have the id/class you want filtered out:Note that you cannot have two elements with the same id - you have two rows with the id
rowToClick. Use aclassinstead.我相信这是理想的行为：
I believe this is the desired behavior:
我会将您的代码切换为如下所示：
然后，如下所示：
I'd switch your code to something like this:
Then, something like this: