Question

我使用php从mySQL检索了我的数据。并且检索的数据循环通过，以便每个div的id为“bills”+1和“bills_info”+1。我正在尝试将jquery添加到这些div中，以便在点击之前隐藏一些文本。但是由于div是循环的并且具有不同的名称，我也想循环遍历jquery，所以我必须编写代码的次数与div一样多。

这是我的代码：

$i=0;
$j=0;
while($row = $result->fetch_assoc()) {

   // Write the value of the column FirstName and BirthDate
  echo "<div data-role='main' id='bill" .$i++."' class='bills'>" . $row['BName'] . "</div>";

  echo "<div data-role='popup' id='bill_info" .$j++."' class='bill_info'><p>Account number: ". $row['AccNumb'] ."</p>
      <p> Reference Numebr: " . $row['RefNumb'] . "</p>
      <p> Amount: " . $row['Amount'] . "€</p>
      <p> Due date: " . $row['eDate'] . "</p></div>";

  }

Jquery的：

var i = 0;
var j = 0;

$(function() {

    $( '#bill_info' + j++ ).dialog({
    autoOpen: false
    });

    $("#bills" + i++).click(function() {
       $("#bill_info" + j++).dialog("open");
    });

});

Answer 1

按类而不是ID定位，并使用next()顶部选择正确的bill_info元素：

$(function() {

    $('.bills').dialog({
    autoOpen: false
    });

    $('.bills').click(function() {
       $(this).next().dialog("open");
    });

});

Answer 2

对于对话框，您可以将它们的类用作选择器，插件将为该类的所有元素进行初始化。

对于按钮（或任何#billsx），您可以使用增量编号添加数据属性，并使用类添加点击处理程序

<div data-role='main' data-id='bill_info" .$i++."' class='bills'>

JS

$('.bill_info').dialog({
   autoOpen: false
});

$('.bills').click(function(){
     var dialogId = $(this).data('id');
     $('#'+dialogId).dialog('open');
});

将jQuery添加到循环div

2 个答案: