jQuery动画动画呈现的部分

我想隐藏部分用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>

来源

2012-10-07 Lukasz Muzyka

好，美观大方。现在请将呈现的完整HTML代码从''发布到''。你可以吗？ –

当然，请参阅上面 –

不错，代码是完美的。什么是问题？ –

你已经使用了相同的功能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>

来源

2012-10-07 11:15:54

这就像一个魅力。谢了哥们。 –

jQuery动画动画呈现的部分

回答

相关问题