jquery - jQuery の slideToggle() が機能しない

Question

ビューから動的に生成された次のテーブルがあります。class=headingshow または hide にクリックイベントを追加する必要がありますclass=content。

<table>
<thead>
    <tr>
        <th class="thead">Function</th>
        <th  class="thead"">Type</th>
        @foreach (var item in Model.PackageNames)
        {
            <th class="thead">
                @item
            </th>
        }
    </tr>
</thead>
<tbody>
    @foreach (var item in Model.PrivilegeGroups)
    {
        <tr>
            <td colspan="50">
                <div class="heading">
                    @item.Name
                </div>
            </td>
        </tr>
        <text>
            <p class="content">
                @foreach (var privilege in item.Privileges.Values)
                {
                    <tr>
                        <td>
                            @privilege.Name
                        </td>
                        <td>
                            @privilege.Type.ToString()
                        </td>
                        @foreach (var package in privilege.Packages)
                        {
                           <td>
                                @package.AccessLevel.ToString()
                           </td>
                        }
                    </tr>
                }
            </p>
        </text>
    }
</tbody>
</table>

これが私が使用しているjQueryですが、機能しません。

<script type="text/javascript">
    $(document).ready(function () {
        $(".heading").click(function () {
            $(this).next(".content").slideToggle(500);
        });
    });   // -- End Ready
</script>

ただし、$('.content').slideToggle();機能し、すべての要素をで切り替えますclass=content。次の要素だけ非表示にしたい。どうすれば機能しますか？

ありがとう。

score 0 · Accepted Answer

データがページにロード/レンダリングされた後、jqueryコードが実行されていますか?

「クリック」の代わりに「ライブ」を試すことはできますか? したがって、jqueryコードは次のように変更されます

<script type="text/javascript">
    $(document).ready(function () {
        $(".heading").live('click', function () {
            $(this).next(".content").slideToggle(500);
        });
    });   // -- End Ready
</script>

確認する 1 つの方法は、ページがロードされたら、firebug (FF の場合) で jquery コードを実行し、何が機能するかを確認してから、それに応じてスクリプトタグのコードを更新することです。

score 0 · Accepted Answer

@Garrett Fogerlie と @saganbyte に感謝しclass=headingます。<td><tr>$(this).next(".content").slideToggle(500);

@foreach (var item in Model.PrivilegeGroups ) {
        <tr class="heading">
            <td colspan="50">
                    @item.Name
            </td>
        </tr>
        <p class="content">
            @foreach (var privilege in item.Privileges.Values)
            {
                <tr>
                    <td class="thead">
                        @privilege.Name
---Rest of the code here

score 0 · Accepted Answer

まず、内部では,と<tbody>のみが許可されているため、次のようになるはずです。<th><tr><td><tbody>

<tbody>
    @foreach (var item in Model.PrivilegeGroups)
    {
        <tr>
            <td colspan="50" class="heading">
                @item.Name
            </td>
        </tr>
        <tr class="content">          
            @foreach (var privilege in item.Privileges.Values)
            {
                <td>
                    @privilege.Name
                </td>
                <td>
                    @privilege.Type.ToString()
                </td>
                @foreach (var package in privilege.Packages)
                {
                    <td>
                        @package.AccessLevel.ToString()
                    </td>
                }
            }
         </tr>
    }
</tbody>

私はjavascriptがあまり得意ではありませんが、またはに置き換え$(this).next(".content").slideToggle(500);てみてください。$(this).closest(".content").slideToggle(500);$(this).next("p").slideToggle(500);

それらが機能しない場合は、次のようidに代わりに一意を使用してみてください。class

<tbody>
    @{ int i = 0; }
    @foreach (var item in Model.PrivilegeGroups)
    {
        <tr>
            <td colspan="50" class="heading">
                @item.Name
            </td>
        </tr>
        <tr id="content@i">          
            @foreach (var privilege in item.Privileges.Values)
            {
                <td>
                    @privilege.Name
                </td>
                <td>
                    @privilege.Type.ToString()
                </td>
                @foreach (var package in privilege.Packages)
                {
                    <td>
                        @package.AccessLevel.ToString()
                    </td>
                }
            }
         </tr>
    @{ i++ } 
    }
</tbody>

次に、それに応じて JavaScript を更新します。

私が言ったように、私はjavascript/jqueryが苦手です。これが役に立てば幸いです。

jquery - jQuery の slideToggle() が機能しない

3 に答える 3

Related

Reference