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

我有一些来自数据库的数据以循环的形式出现。每个记录都有一个名为“兑换”的按钮（实际上是超链接）。用户可以单击此按钮确认其选择。如果他单击“是”，则会出现另一个对话框，要求他单击“打印”按钮或取消打印。如果他单击“打印”，则属于该记录的变量/数据应发送到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>
.
...

将打印上述回波数据

因此，在我的例子中，我无法将id（即r2）传递给printing_div，以便查询数据库。我怎样才能做到这一点？

---

感谢所有的帮助。谢谢。

如果您有这样的链接：

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

$("#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);
});

---

如果您有这样的链接：

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

$("#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);
});

---

鉴于你的链接，比如：

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

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

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

---

希望这能有所帮助。

因此，考虑到您的链接，例如：

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

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

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

---

希望能有所帮助。

传递变量有几种不同的方法。在您的示例中，您在通过两个对话框时，将一个变量从点a传递到点b。通过在一个对话框中使用两个div，并根据对话框中的单击隐藏和显示div，我简化了您的对话框。 然后，我将该值存储在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>

记录2-----
你确定要赎回这个吗

你想打印这个吗

传递变量有两种不同的方法。在您的示例中，您在通过两个对话框时，将一个变量从点a传递到点b。通过在一个对话框中使用两个div，并根据对话框中的单击隐藏和显示div，我简化了您的对话框。 然后，我将该值存储在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>

记录2-----
你确定要赎回这个吗

你想打印这个吗

嗨，谢谢你的回复。它确实有效。不过我有个问题。正如我提到的，我的目的是读取接收到的id并在查询中使用它。如何将JavaScript变量值分配给PHP变量，以便查询。您好，感谢他的回复。它确实有效。不过我有个问题。正如我提到的，我的目的是读取接收到的id并在查询中使用它。如何将JavaScript变量值分配给PHP变量，以便查询。您好，感谢您的努力，但遗憾的是，您的解决方案没有为我提供正确的答案。你能把我的问题仔细考虑一下吗？显然我不明白你的问题是什么。我已经读了很多遍了，所以多读一点对我没有帮助。也许你可以澄清你的问题，这样我和其他人就可以理解你真正想做什么。像“将id传递给打印部门”这样的短语毫无意义。您不需要将任何内容传递给div。如果您想查询数据库，那么将id放入ajax调用中，并使用ajax调用后端服务器。我的答案向您展示了如何使用javascript获取id，然后您可以在那里使用它做任何您想做的事情。您好，感谢您的努力，但不幸的是，您的解决方案没有为我提供正确的答案。你能把我的问题仔细考虑一下吗？显然我不明白你的问题是什么。我已经读了很多遍了，所以多读一点对我没有帮助。也许你可以澄清你的问题，这样我和其他人就可以理解你真正想做什么。像“将id传递给打印部门”这样的短语毫无意义。您不需要将任何内容传递给div。如果您想查询数据库，那么将id放入ajax调用中，并使用ajax调用后端服务器。我的回答向您展示了如何使用javascript获取id，然后您可以从那里使用它做任何事情。谢谢。我会试试的。嗨，你的方法也行。只是方法不同。由于一次只能接受一个答案，我接受了第一个正确的答案。因此，我将投票支持你的方案，以便任何其他需要帮助的人都能通过你的解决方案。谢谢你的帮助，谢谢你。我会试试的。嗨，你的方法也行。只是方法不同。由于一次只能接受一个答案，我接受了第一个正确的答案。因此，我将投票支持你的方案，以便任何其他需要帮助的人都能通过你的解决方案。谢谢你的帮助。