Question

我应该告诉你我的代码实际上是有效的，但是我自己无法解决一小撮烦人的问题。

问题是我只能从数据网格中检索第一个记录（id），但无法检索第二个或其他记录ID

示例：当我单击我的第一笔数据记录的编辑按钮时，我想将ID发送给我的jquery，并在控制台中显示它，并使用它来选择数据表单数据库（这是可行的）

但是当我单击第二条数据记录的编辑时，它不会将数据发送到Jquery并在控制台中显示

这是我的网格代码

    <?php foreach($data['gakubu_data'] as $gakubu):?>
        <li class="list-group-item d-flex justify-content-between align-items-center"><?= $gakubu['code_gakubu'];?> | <?= $gakubu['gakubu'];?>

        <a href="" data-code="<?= $gakubu['code_gakubu']?>" id="showUpdateModal" class="badge badge-success" data-toggle="modal" data-target="#formModal">編集</a>
        </li>

    <?php endforeach;?> 

    </div>
</div>

这是我的Jquery脚本

$(function(){

$('#showUpdateModal').on('click',function(){

    $('#formModalLabel').html('データ編集');
    $('.modal-footer button[type=submit]').html('データ編集');
    const id = $(this).data('code');
    console.log(id);


 });
});

Answer 1

您的循环会创建多个具有相同ID（id="showUpdateModal"）的元素。 ID的必须在文档中必须是唯一的，因此当您使用$('#showUpdateModal')选择该ID时，它将始终返回具有该ID的第一个元素（因为相同的ID）。

您可以改用类来解决它：

<a href="" data-code="<?= $gakubu['code_gakubu']?>" class="showUpdateModal badge badge-success" data-toggle="modal" data-target="#formModal">編集</a>

（我删除了ID并添加了showUpdateModal作为类）

现在您可以在类上注册该事件：

$('.showUpdateModal').on('click', function() {
    // Your current code
});

如何修复无法使用jQuery检索数据

1 个答案: