Question

我有一个包含以下PHP代码的表：

<table id="myTable">
        <tr class="header">
            <th>Naam</th>
            <th>Bedrijf</th>
        </tr>
        <?php
        include 'assets/scripts/connect.php';
        $q = mysql_query("SELECT * FROM `users` WHERE `admin`='0' AND `deleted`='0'");
        while ($row = mysql_fetch_assoc($q)) {
                $id = $row['id'];
            ?>
            <tr class="trash" onclick="deletePopUp()" data-id="<?php echo $id; ?>">
             <td><?php echo $row['fname']; ?> <?php echo $row['lname']; ?></td>
             <td><?php echo $row['company']; ?></td>
            </tr>

           <?php
                }
            ?>
</table>

正如您所看到的，我为代码与数据库一起创建的每一行添加了一个data-id。 onClick函数会弹出一个模态，其中包含确认用户是否确实要删除此客户的请求。模态按以下方式编码：

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
    <div class="modal-top">
        <h1>Weet je het zeker?</h1>
        <span class="close">&times;</span>
    </div>
    <div class="modal-inner">
        <a href="delete-user.php?id=<?php echo $id; ?>" id="delete" class="btn-confirm">Verwijderen</a>
        <a href="#" class="btn-cancel cancel">Annuleren</a>
    </div>

</div>

</div>

两个锚标签用于确认。因此，可以转到外部PHP脚本，根据其ID删除客户。我使用GET方法。但是现在模态上的链接始终具有相同的ID。链接始终是：

/assets/scripts/delete-user.php?id=2

我希望ID与点击的客户的ID相同。

我尝试使用jQuery来形成这个链接，但我得到了相同的结果。这是我使用的jQuery：

var id=$('.trash').data('id');
$('#delete').attr('href','/assets/scripts/delete-user.php?id='+id);

但如上所述，这给出了同样的结果。

如何获取模态上的链接以获得动态ID？

Answer 1

因为您添加了内联js事件处理函数，我建议使用参数：

event：事件对象
this：当前元素

在你的情况下，你可以写：

<tr class="trash" onclick="deletePopUp(event, this)" data-id="This is An ID">

因此，您的deletePopUp函数将是：

function deletePopUp(e, ele) {
    var id = ele.dataset['id'];  // get current data-id
    $('#delete').attr('href','/assets/scripts/delete-user.php?id='+id);
    $('#myModal').modal('show');
}

摘录：

function deletePopUp(e, ele) {
  var id = ele.dataset['id'];
  $('#delete').attr('href','/assets/scripts/delete-user.php?id='+id);
  $('#myModal').modal('show');
}


$('#delete').on('click', function(e) {
    e.preventDefault();
    console.log(this.href);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table id="myTable">
    <tr class="header">
        <th>Naam</th>
        <th>Bedrijf</th>
    </tr>
    <tr class="trash" onclick="deletePopUp(event, this)" data-id="This is An ID">
        <td>name</td>
        <td>company</td>
    </tr>
</table>
<!-- The Modal -->
<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-top">
            <h1>Weet je het zeker?</h1>
            <span class="close">&times;</span>
        </div>
        <div class="modal-inner">
            <a href="delete-user.php?id=<?php echo $id; ?>" id="delete" class="btn-confirm">Verwijderen</a>
            <a href="#" class="btn-cancel cancel">Annuleren</a>
        </div>

    </div>

</div>

Answer 2

上述更简单的方法可能是：（我没有对此进行过测试，我认为这可以满足您的需求）

$(document).ready(function() {
    $(".trash").click(function() {
        var id = $(this).attr("data-id");
        $("#delete").attr("href","delete-user.php?id="+id);
    });
});

从PHP变为jQuery以形成链接

2 个答案: