Javascript 滑动切换具有相同id的多个div_Javascript_Jquery

Javascript 滑动切换具有相同id的多个div

javascript jquery

Javascript 滑动切换具有相同id的多个div,javascript,jquery,Javascript,Jquery,我正在尝试为艺术家创建一个信息表。字段是从数据库动态生成的。如果任何用户单击艺术家名称，则很少会显示与艺术家相关的其他信息。首先，其余的信息被隐藏起来 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <table> <tr&g

我正在尝试为艺术家创建一个信息表。字段是从数据库动态生成的。如果任何用户单击艺术家名称，则很少会显示与艺术家相关的其他信息。首先，其余的信息被隐藏起来

<!doctype html>
   <html lang="en">

<head>
 <meta charset="utf-8" />
 <title></title>
</head>

<body>

<table>
<tr>
    <td>Artist Name</td>
    <td>Birth Year</td>
    <td>Age</td>
</tr>
<tr id="collapsible">
    <td><h2><a href="" id="check-details">A</a></h2></td>
    <td>1988</td>
    <td>26</td>
    <div id="rest">
        <tr>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
    </div>
</tr>
<tr id="collapsible">
    <td><h2><a href="" id="check-details">B</a><h2></td>
    <td>1988</td>
    <td>26</td>
    <div id="rest">
        <tr>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
    </div>
</tr>
<tr id="collapsible">
    <td><h2><a href="" id="check-details">C</a><h2></td>
    <td>1988</td>
    <td>26</td>
    <div id="rest">
        <tr>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
    </div>
  </tr>
  </table>

  </body>

  </html>

您在那里出现了很多错误。
例如，除非随机div位于元素内部，否则不能在表中包含它们。

我更正了语法并对javascript代码进行了一些改进。
（

$（this）.parents（'.collapsable'）。next（'.rest'）。slideToggle（'slow'）；

）

jsFiddle

是不正确的，您的a标记位于h2中，这是它的父项，您必须这样做

$(this).parent().parent().parent()

返回到包含div的tr

此外，在tr中包含div是格式不良的HTML，就像在tr中包含tr一样

我建议将HTML更改为以下内容：

<table>
    <tr>
        <td><a href="" class="artistLink">Katy Perry</td>
        <td></td>
        <td></td>
    </tr>
    <tr class="rest">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<script>
    $("tr.rest").hide();

    $("a.artistLink").click(function(e) {
        $(this).parent().parent().next("tr.rest").slideToggle();
        ...
    });
</script>


凯蒂·佩里
$（“tr.rest”）.hide（）；
$（“a.artistLink”）。单击（函数（e）{
$（this.parent（）.parent（）.next（“tr.rest”）.slideToggle（）；
...
});

这是写在我的iPad上的，所以可能需要调整

不要使用多个

id

<代码>Id的是唯一的，请改用

类

。元素的Id必须是唯一的。。。。使用类将元素分组我已将id命名为类名，但没有luckYou正在加载commom

jquery

文件？没有，现在是单个文件。但我打算在我的主要工作中使用它

$(this).parent().parent().parent()

<table>
    <tr>
        <td><a href="" class="artistLink">Katy Perry</td>
        <td></td>
        <td></td>
    </tr>
    <tr class="rest">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<script>
    $("tr.rest").hide();

    $("a.artistLink").click(function(e) {
        $(this).parent().parent().next("tr.rest").slideToggle();
        ...
    });
</script>