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'时遇到一些问题，因为如果我尝试做那些普通的id（而不是变量），它可以工作......

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

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

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

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

1 个答案: