jquery - Laravel 4 - 动态表使用 jquery 显示/隐藏数据

Question

我创建了一个带有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 中调用“ids”时遇到了一些问题，因为如果我尝试使用普通的 ids（不是变量），它可以工作......

我将不胜感激任何帮助！！谢谢！！

Answer 1

我的解决方案：

@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");

我希望它可以帮助别人！;)