0

免责声明：我是 jQuery 和 js 的新手。

我正在尝试使用 jQuery 隐藏用户配置文件中呈现的部分部分。我呈现用户记录的集合：

<ul class="records">
    <%= render @work_records %>
</ul>

在部分文件中我使用以下代码：

<li>
<div>
    part to be visible
</div>
<div class="container">
    <a href="javascript:void(0);" onclick="ShowDetails();">Show details</a>
    <script type="text/javascript">
        function ShowDetails()
            {
                $("#work_details_<%= work_record.id %>").slideToggle("fast");
            }
    </script>
</div>
<div class="profile_details" id="work_details_<%= work_record.id %>" style="display: none;">
    part to be hidden
 </div></li>

这将呈现所有用户记录并按预期创建链接。当我按预期分析 html 时（id 是唯一的并且在每个部分中匹配）

现在，我不确定在哪里寻找问题（几乎没有 js 经验），因为幻灯片的唯一部分是最后一个。如果我单击其他部分上的链接而不是滑动最后一个。有什么想法吗？

更新：这是代码生成的 HTML（从不相关的部分中删除）

<html> 
<body>
    <div class="container">     
        <div class="row">
    <div class="span6">
        <ul class="records">
            <li>
                <div>
                    <h1>Partial title</h1>
                </div>
                <div class="container">
                    <a href="javascript:void(0);" onclick="ShowDetails();">Show details</a>
                    <script type="text/javascript">
                        function ShowDetails()
                        {
                            $("#work_details_1").slideToggle("fast");
                        }
                    </script>
                </div>
                <div class="profile_details" id="work_details_1" style="display: none;">
                    Content of partial that needs to be hidden 
                </div>
            </li>
            <li>
                <div>
                    <h1>Partial title</h1>
                </div>
                <div class="container">
                    <a href="javascript:void(0);" onclick="ShowDetails();">Show details</a>
                    <script type="text/javascript">
                        function ShowDetails()
                        {
                            $("#work_details_3").slideToggle("fast");
                        }
                    </script>
                </div>  
                <div class="profile_details" id="work_details_3" style="display: none;">
                    Content of partial that needs to be hidden 
                </div>
            </li>
            <li>
                <div>
                    <h1>Partial title</h1>
                </div>
                <div class="container">
                    <a href="javascript:void(0);" onclick="ShowDetails();">Show details</a>
                    <script type="text/javascript">
                        function ShowDetails()
                        {
                            $("#work_details_4").slideToggle("fast");
                        }
                    </script>
                </div>  
                <div class="profile_details" id="work_details_4" style="display: none;">
                    Content of partial that needs to be hidden 
                </div>
            </li>
        </ul>
    </div>
</body>

4

1 回答 1

0

您对所有内容都使用了相同的功能show_details()。这就产生了问题。您可以将函数名称从show_details()to更改show_details_work()为每个唯一的名称并更新处理程序吗？

就像，在您的代码中更改此部分：

<script type="text/javascript">
    function ShowDetails_Work<%= work_record.id %>Details()
        {
            $("#work_details_<%= work_record.id %>").slideToggle("fast");
        }
</script>
于 2012-10-07T11:15:54.170 回答