jQuery - 根据单击的按钮将变量/数据传递给 div

Question

我有一些来自数据库的数据循环出现。每条记录都有一个名为“兑换”的按钮（实际上是超链接）。用户可以单击此按钮来确认他的选择。如果他单击“是”，则会出现另一个对话框，要求他单击“打印”按钮或取消打印。如果他单击“打印”，则属于该记录的变量/数据应发送到 ID 为“printing_div”的 div。这些变量将用于查询数据库，检索某些结果，然后回显结果，以便用户可以打印该数据。

为了便于说明，请考虑以下情况：

Record 1 ----- <a href="#" id="r1">Redeem</a>
Record 2 ----- <a href="#" id="r2">Redeem</a>
Record 3 ----- <a href="#" id="r3">Redeem</a>
.
...

假设用户单击属于第二条记录的“兑换”按钮，则： 1. 弹出一个对话框，询问他是否要兑换。可点击的按钮有“是”和“否”。如果按“否”，该对话框就会消失。如果单击“是”，则会启动另一个对话框，其中显示：您确定要立即打印吗？可单击的按钮是“立即打印”和“取消打印”。如果单击“取消打印”，则关闭最近的对话框。如果单击“立即打印”，则所单击的超链接的 ID（即“r2”）应作为值传递给 ID 为“printing_div”的 div。该 r2 将用于查询数据库，例如：

$query = "SELECT FROM table WHERE col = 'r2' ";
$row = mysql_fetch_array($query);

echo $row[0].$row[1];

将打印上述回显的数据。

因此，就我而言，我无法将 id（即 r2）传递给printing_div，以便我可以查询数据库。我该怎么做？

感谢所有帮助。谢谢。

Answer 1

因此，给定您的链接，如下所示：

<div id="redemption">
   <a href="#" id="r1">Redeem</a>
   <a href="#" id="r2">Redeem</a>
   <a href="#" id="r3">Redeem</a>
</div>

以及您提到的用于打印的 div：

<div id="printing_div"></div>

您可以像上面提到的 jfriend00 一样：

$("#redemption a").click(function() {
   var id = this.id;

   // Assign the id to a custom attribute called data-id
   $("#printing_div").attr("data-id", id);

   return false;
});

然后当然您可以通过以下方式在发送回服务器的任何 AJAX 调用中检索新属性：

var id = $("#printing_div").attr("data-id");

希望有所帮助。

Answer 2

有几种不同的方法来传递变量。在您的示例中，您在经历 2 个对话框时将一个变量从 a 点传递到 b 点。我通过在一个对话框中使用两个 div 并根据对话框中的点击隐藏和显示 div 来简化您的对话框。
然后我使用 jQuery 的数据函数 将值存储在 dom 上的特定位置。我经常看到隐藏的表单字段也使用了特定的 id。

主要思想是你“通常”不能将它作为函数传递给点击处理程序，但你可以将它存储在 dom 中并在需要时调用它。

这是 Jquery 脚本

$('#dialog-box').dialog({
  close: function(){
    $('#confirm-redeemable').show();
    $('#confirm-print').hide();
  }
/*Custom settings here*/});
$('.redeemable').live('click', function(e){
  e.preventDefault();
  $('#dialog-box').dialog('open');
  $('#dialog-box').data('documentId', $(this).attr('id'));
});

$('#dialog-box a.yes').live('click', function(e){
  e.preventDefault();
  $('#confirm-redeemable').hide();
  $('#confirm-print').show();
});

$('#dialog-box a.no, #dialog-box a.print-no').live('click', function(e){
  e.preventDefault();
  $('#dialog-box').dialog('close');
});

$('#dialog-box a.print-yes').live('click', function(e){
  // Your solution
  $('#printing_div').text($('#dialog-box').data('documentId'));

  // Or
  $.get('url.php', {id: $('#dialog-box').data('documentId')}, function(response){
    console.log(reponse);
  });
});

这是 HTML

Record 2 ----- <a href="#" id="r2" class="redeemable">Redeem</a>

<div id="dialog-box">
  <div id="confirm-redeemable">
    <p>Are you sure you want to redeem this?</p>
    <a href="#" class="yes">Yes</a>
    <a href="#" class="no">No</a>
  </div>

  <div id="confirm-print" style="display: none;">
    <p>Do you want to print this?</p>
    <a href="#" class="print-yes">Yes</a>
    <a href="#" class="print-no">No</a>
  </div>
</div>

Answer 3

如果你有一个像这样的链接：

<div id="redemption">
    <a href="#" id="r1">Redeem</a>
    <a href="#" id="r2">Redeem</a>
    <a href="#" id="r3">Redeem</a>
</div>

并且你在 jQuery 中有一个点击处理程序，如下所示：

$("#redemption a").click(function() {
    // you can get the link object that was clicked via the "this" variable
    var clickedID = this.id;

    // do your other logic here using clickedID

    // show that click was already processed 
    // so the link doesn't do anything further with it
    return(false);
});