将 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

通过 class 而不是 id 定位，并使用 next() top select 正确的 bill_info 元素代替：

$(function() {

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

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

});

Answer 2

对于对话框，您可以使用它们的 class 作为选择器，插件将使用 class.

初始化所有元素

对于按钮（或任何 #billsx 是），您可以添加一个带有增量数字的数据属性，还可以使用 class 添加点击处理程序

<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

Adding jQuery to looped divs

javascript

php

jquery

loops

while-loop