Question

我有一些来自数据库的数据在循环中出现。这些记录中的每一个都有一个名为“Redeem”的按钮（实际上是超链接）。用户可以单击此按钮以确认其选择。如果他单击是，则会显示另一个对话框，要求他单击“打印”按钮或取消打印。如果他点击“打印”，那么属于该记录的变量/数据应该被发送到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's data function将值存储在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);
});

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

3 个答案: