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動畫動畫呈現的部分

回答

相關問題