将值传递到 Bootboxjs 对话框确认框

问题描述

我有一个像这样的 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 的 class="show-confirmation" 时，我想在 $d->ID 确认对话框中获取 bootBox js 的值。由于这是一个 for each 循环，我想每次在对话框确认框中传递一个新的学生 ID。

在确认对话框中，我想看到 Confirm,student ID? + 15 是该行的学生 ID。

我做了什么？

我添加了一个变量 var StudentID = $('#StudentID').val();，希望能从类 StudentID 中获取学生 ID 值，例如：<td class="StudentID"> 但我访问它时它是 undefined。立>

有人可以指导我完成这个方法吗？

解决方法

您的 $('#StudentID') 正在寻找一个将其作为 id 属性的元素，而您已将其设置为一个类。改为$('.StudentID')。

这是实现这一目标的一种简洁方法：
您需要执行以下操作：

更改您的 PHP 代码以生成我在下面显示的 HTML 结构。
在元素上设置 data 属性以保存您在代码中需要的数据。通过这种方式，您可以在元素的 innerHTML 中向用户显示花哨的格式化数据，并拥有可以在代码中直接用作数据属性值的数据。
您需要引用被点击的学生，然后选择该学生的学生 ID。在您的情况下，您将有多个 <td class="StudentID"> 并且 $('.StudentID').val() 将无法从所有学生行中识别点击的项目。因此，如果您注意到我在父 Student 上创建了一个名为 tr 的类。
点击事件触发后，根据类名查找父级及其子级。 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>

问题是

首先，您应该使用 .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);
    });
  })
});

问题

不正确的选择器，使用 .StudentID 代替 #StudentID
获取文本方法不正确，使用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>

bootbox javascript