0

を使用して動的テーブルを作成しましたforeach。そして、すべての行を「マウスオーバー」するとデータを表示し、「マウスアウト」すると再び非表示にしたいと思います。私のコード:

@foreach($actividads as $p)

            <tr id="{{ $p->id }}">
                <td>
                    <table class="table">
                        <td>
                        </td>
                    </table>
                </td>
                <td>
                    <div id="content{{ $p->id }}" class="hidden">
                        <button type="button" class="btn btn-danger pull-right">Action</button>
                    </div>
                </td>
            </div>
            </tr>

@endforeach

ユーザーが「マウスオーバー」すると、そのコンテンツが表示されます<tr id="{{ $p->id }}">。<div class="{{ $p->id }}">そして、ユーザーがそれを「マウスアウト」すると、コンテンツは再び非表示になります。

私のjQuery：

$(document).ready(function(){

    $("#{{ $p->id }}").on('mouseover',function (e) {
        var mostrar = $(this).attr('id');
        $("#content" + mostrar).show();
    });
    $("#{{ $p->id }}").on('mouseout',function (e) {
        var mostrar = $(this).attr('id');
        $("#content" + mostrar).hide();
    });
});

jQueryで「ID」を呼び出す際に問題が発生します。これは、通常のID（変数ではない）を実行しようとすると機能する可能性があるためです...

助けていただければ幸いです!! ありがとうございました！！

4

1 に答える 1

0

私の解決策：

@foreach($actividads as $p)

            <tr data-id="{{ $p->id }}" class="myclass">
                <td>
                    <div id="content{{ $p->id }}" class="hidden">
                        <button type="button" class="btn btn-danger pull-right">Action</button>
                    </div>
                </td>

...そして私のjQuery：

$(document).on({
        mouseenter: function () {
            var mostrar = $(this).data('id');
            var mostrar_id = 'content'+ mostrar;
            // alert(mostrar_id);
            $("#" + mostrar_id).removeClass("hidden");
        },

        mouseleave: function () {
            var mostrar = $(this).data('id');
            var mostrar_id = 'content'+ mostrar;
            // alert(mostrar_id);
            $("#" + mostrar_id).addClass("hidden");
        }
    }, ".myclass");

誰かの役に立てば幸いです！;)

于 2014-07-22T08:07:49.170 に答える