Question

免责声明：我是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>

Answer 1

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

比如，在代码中更改此部分：

<script type="text/javascript">
    function ShowDetails_Work<%= work_record.id %>Details()
        {
            $("#work_details_<%= work_record.id %>").slideToggle("fast");
        }
</script>

jQuery动画呈现动态部分

1 个答案: