将 jQuery 添加到循环 div

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

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

对于按钮（或任何#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');
});

Answer 2

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

$(function() {

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

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

});