变量从PHP变成jQuery形成link

Question

我有一个 table 具有以下 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>

如您所见，我为代码结合数据库创建的每一行添加了一个数据 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 方法。但是模态窗口中的 link 现在总是使用相同的 ID。 link 总是：

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

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

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

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

但是如前所述，这给出了相同的结果。

如何让模态框上的 link 具有动态 ID？

Answer 1

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

事件：事件对象
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形成link

Variable from PHP into jQuery to form a link

javascript

php

anchor

jquery