如何使用jQuery在模式彈出窗口中傳遞值

Question

在一個表中，我顯示了幾個鏈接，這些鏈接的值（用戶ID）是從數據庫中提取的。 通過單擊鏈接會出現一個模式彈出窗口，我想在其中傳遞所選值。

表格如下：

<table>
    <tr>
        <td>Username</td>
        <td>Id</td>
    </tr>

<?php
    include ‘db_connection.php’;
    $sql = "SELECT * FROM users";
    $result = mysql_query($sql);
    while($row = mysql_fetch_array($result)){
?>
<tr>
    <td><?php echo $row[userID]?></td>
    <td>
        <div id='basic-modal'>
            <a href="?id=<?php echo $row[userID]?>"  class='basic'>Show</a>
        </div>
     </td>
</tr>

<?php } ?>

</table>

如果我單擊鏈接，則顯示將出現模式彈出窗口：

<div id="basic-modal-content">
    <?php
        if(isset($_GET[‘userID’])){
            $userID = $_GET[‘userID’];
            echo ‘UsuerID: ‘ .$userID;
        }
    ?>
</div>

這是我使用的腳本

jQuery(function ($) {
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content').modal();
            return false;
    });
});

由於我對jQuery框架不太熟悉，所以我想問你如何在模式中傳遞選定的值然后使用它。

Answer 1

jQuery允許您使用.data（）屬性

    <div id='basic-modal'>
        <a href="?id=<?php echo $row[userID]?>"  data-mydata="<?php echo $row[userID]?>" class='basic'>Show</a>
    </div>

然后您可以從'data-mydata'屬性檢索數據：

jQuery(function ($) {
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content')
              .text($(this).data('mydata'))
               .modal();
            return false;
    });
});