JavaScript 点击函数表格单元格仅应用于第一行

Question

我在表格行上有一个 JavaScript 点击函数，但是当我点击它时，该函数只在第一行起作用。我该如何解决这个问题？

<script type="text/javascript">
   $(document).ready(function(){  
        $('#detpanel').hide();
        $("#showdet").click(function(){
            $('#detpanel').slideDown(500);
        });
        $("#hidedet").click(function(){
            $('#detpanel').slideUp(500);
        });
        $('#showdet').hover(function(){
            $(this).divhover("background-color", "yellow");
        });
    });    
</script>

<tbody>
   <?php $i = 0; ?>
    @foreach ($auser as $res)
       <?php $i += 1; ?>
           <tr @if($i%2==0) class="bgcolor dihover" @endif id='showdet' class="dihover">
               <td>{{ $res->id }}</td>
               <td>{{ $res->name }}</td>
               <td>{{ $res->email }}</td>
               <td>
                   <a class="default-btn" href="/pms/admin/user/edit/{{ $res->id }}">Edit</a>&nbsp;|&nbsp;
                   <a type="submit" class="default-btn del" data-id="admin-user" href="pms/admin/user/delete/{{ $res->id }}">Delete</a>
               </td>
            </tr>
    @endforeach
</tbody>

Answer 1

元素的 ID 必须是唯一的，因为您是在循环使用类中创建元素。

当使用 ID 选择器时，它将仅返回具有所述 ID 的第一个元素，因此在您的情况下，点击处理程序仅注册到第一个元素

                <tbody>
                    <?php $i = 0; ?>
                    @foreach ($auser as $res)
                        <?php $i += 1; ?>
                        <tr @if($i%2==0) class="bgcolor dihover" @endif class='showdet' class="dihover">
                            <td>{{ $res->id }}</td>
                            <td>{{ $res->name }}</td>
                            <td>{{ $res->email }}</td>
                            <td>
                                <a class="default-btn" href="/pms/admin/user/edit/{{ $res->id }}">Edit</a>&nbsp;|&nbsp;
                                <a type="submit" class="default-btn del" data-id="admin-user" href="pms/admin/user/delete/{{ $res->id }}">Delete</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>

然后使用类选择器注册点击处理器

$(document).ready(function () {
    $('#detpanel').hide();
    $(".showdet").click(function () { //use class selector here
        $('#detpanel').slideDown(500);
    });
    $("#hidedet").click(function () {
        $('#detpanel').slideUp(500);
    });
    $('#showdet').hover(function () {
        $(this).divhover("background-color", "yellow");
    });
});