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

【问题标题】：Pass values into Bootboxjs dialog confirm box将值传递到 Bootboxjs 对话框确认框
【发布时间】：2021-07-17 01:15:19
【问题描述】：

我有一个像这样的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>

我想要完成的是当我单击具有class="show-confirmation" 的click to confirm 时，我想在bootbox js 确认对话框中获取$d->ID 的值。由于这是一个for each 循环，我想每次在对话框确认框上传递一个新的学生ID。

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

我做了什么？

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

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

【问题讨论】：

标签： javascript php bootbox

【解决方案1】：

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

【讨论】：

感谢您撰写答案。我按照您的建议进行了更改，但没有成功。

【解决方案2】：

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

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

【讨论】：

【解决方案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);
    });
  })
});

【讨论】：

【解决方案4】：

问题

不正确的选择器，使用.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>

【讨论】：