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()から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 に答える