將值傳遞到 Bootboxjs 對話框確認框

Question

我有一個像這樣的PHP foreach 循環：

<?php
foreach ($student->student as $d) {
    echo
    '<tr>' 
        '<td class="StudentID">' . $d->ID . '</td>' .
        '<td>' . $d->Date . '</td>' .
        '<td>' . $d->Name . '</td>' .
        '<td><a class="show-confirmation">'. "click to confirm" . '</a></td>' .
    '</tr>';
}
?>

我正在為這樣的對話框使用bootbox js ：

<script>
    $(document).on("click", ".show-confirmation", function(e) {
        var StudentID = $('#StudentID').val();

        bootbox.confirm("Confirm, student ID? " + StudentID, function(result) {
            console.log('This was logged in the callback: ' + result);
            console.log('StudentID: ' + StudentID);
        });
    });
</script>

我想要完成的是當我單擊click to confirm which has class="show-confirmation" ，我想在bootbox js確認對話框中獲取$d->ID的值。 由於這是一個for each循環，我想每次在對話框確認框中傳遞一個新的學生 ID。

在確認對話框中，我想看到Confirm, student ID? + 15 Confirm, student ID? + 15這是該行的學生 ID。

我做了什么？

• 我添加了一個變量var StudentID = $('#StudentID').val(); 希望從類StudentID獲取學生 id 值，例如： <td class="StudentID">但是當我訪問它時它是undefined 。

有人可以請指導我完成這個方法嗎？

Answer 1

您的$('#StudentID')正在尋找一個將其作為 id 屬性的元素，而您已將其設置為一個類。 改為$('.StudentID') 。

Answer 2

這是實現這一目標的干凈方法：
您需要執行以下操作：

1. 更改您的 PHP 代碼以生成我在下面顯示的 HTML 結構。
2. 在元素上設置data屬性以保存您在代碼中需要的數據。 通過這種方式，您可以在元素的innerHTML向用戶顯示花哨的格式化數據，並且可以將數據作為數據屬性值直接在代碼中使用。
3. 您需要引用被單擊的學生，然后選擇該學生的學生 ID。 在您的情況下，您將有多個<td class="StudentID">並且$('.StudentID').val()將無法識別所有學生行中單擊的項目。 因此，如果您注意到我在父tr上創建了一個名為Student的類。
4. 觸發點擊事件后，根據類名查找父級及其子級。 StudentID或Date或Name並在代碼中選擇您需要的數據屬性。

下面是一個工作示例：

# PHP CODE
<?
echo '<table>';
foreach ($student->student as $d) {
    echo 
    '<tr class="Student">
        <td class="StudentID" data-id="'.$d->ID.'">ID: '.$d->ID.' &nbsp;</td>
        <td class="Date" data-date="'.$d->Date.'">Date: '.$d->Date.' &nbsp;</td>
        <td class="Name" data-name="'.$d->Name.'">Name: '.$d->Name.' &nbsp;</td>
        <td><a class="show-confirmation">click to confirm</a></td>
    </tr>';
}
echo '</table>';
?>

 $(function() { $(".show-confirmation").on("click", function(e) { let student = $(this).closest('.Student'); let StudentID = student.find('.StudentID').data('id'); let date = student.find('.Date').data('date'); let name = student.find('.Name').data('name'); bootbox.confirm(`Confirm, student? ${StudentID}`, function(result) { console.log('This was logged in the callback: ' + result); console.log('StudentID: ' + StudentID); console.log('Date:' + date); console.log('Name:' + name); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script> <table> <tr class="Student"> <td class="StudentID" data-id="111">ID: 111 &nbsp;</td> <td class="Date" data-date="2021-01-01">Date: 2021-01-01 &nbsp;</td> <td class="Name" data-name="Student One">Name: Student One &nbsp;</td> <td><a class="show-confirmation">click to confirm</a></td> </tr> <tr class="Student"> <td class="StudentID" data-id="122">ID: 122 &nbsp;</td> <td class="Date" data-date="2021-01-02">Date: 2021-01-02 &nbsp;</td> <td class="Name" data-name="Student Two">Name: Student Two &nbsp;</td> <td><a class="show-confirmation">click to confirm</a></td> </tr> <tr class="Student"> <td class="StudentID" data-id="133">ID: 133 &nbsp;</td> <td class="Date" data-date="2021-01-03">Date: 2021-01-03 &nbsp;</td> <td class="Name" data-name="Student Three">Name: Student Three &nbsp;</td> <td><a class="show-confirmation">click to confirm</a></td> </tr> <tr class="Student"> <td class="StudentID" data-id="144">ID: 144 &nbsp;</td> <td class="Date" data-date="2021-01-04">Date: 2021-01-04 &nbsp;</td> <td class="Name" data-name="Student Four">Name: Student Four &nbsp;</td> <td><a class="show-confirmation">click to confirm</a></td> </tr> </table>

Answer 3

問題是

首先，您應該使用.StudentID而不是#StudentID 。 因為它是類名而不是 id。 所以，應該是。

var StudentID = $('.StudentID').val();

並且， .val()用於輸入。 如果您的元素看起來像這樣，它應該可以工作

<input class="StudentID" value="id goes here" />

相反，您應該使用.html()或.text() 。 不同之處在於， .html()也返回 HTML 標簽，而.text()只返回文本節點。

所以，你的 JS 應該是這樣的

var StudentID = $('.StudentID').text();

但是，接下來是你有一堆 StudentID，你會得到連接的文本。 所以，你應該使用.each() 。 而且，要讓按鈕可以訪問正確的 id 也很困難。 這是因為 id 不在按鈕內。 因此，您的元素應該具有相同的可識別父元素。

所以，你的代碼應該是這樣的。

<?php
foreach ($student->student as $d) {
    // add class to tr
    echo
    '<tr class="student">' 
        '<td class="StudentID">' . $d->ID . '</td>' .
        '<td>' . $d->Date . '</td>' .
        '<td>' . $d->Name . '</td>' .
        '<td><a class="show-confirmation">'. "click to confirm" . '</a></td>' .
    '</tr>';
}
?>

$(".student").each((i, el) => {
  const id = $(el).find(".StudentID").text();
  const btn = $(el).find(".show-confirmation");
  
  btn.on('click', () => {
    bootbox.confirm("Confirm, student ID? " + id, (result) => {
      console.log('This was logged in the callback: ' + result);
      console.log('StudentID: ' + id);
    });
  })
});

Answer 4

問題

1. 選擇器不正確，請使用.StudentID代替#StudentID
2. 獲取文本方法不正確，使用text()代替val()

解決方案

<script>
    $(document).on("click", ".show-confirmation", function(e) {
        var StudentID = $(".StudentID").text();

        bootbox.confirm("Confirm, student ID? " + StudentID, function(result) {
            console.log("This was logged in the callback: " + result);
            console.log("StudentID: " + StudentID);
        });
    });
</script>