javascript - JQuery:迭代所有表格行并为具有特定类的每个单元格显示弹出窗口

Question

使用 JQuery，我尝试遍历表格的所有行，并为每个具有类的单元格显示定时弹出窗口 = "cell-which-triggers-popup"。

下面的 JQuery 函数仅显示找到的第一个单元格的弹出窗口。我怎样才能让它为该类的每个单元格显示一个弹出窗口。

我这里有一个工作示例 - jsfiddle

HTML:

    <div id="popup" data-name="name" class="dialog" title="Bar Crossing Alert!">
    <p></p>            
</div>
<table id="1" border="1">
     <tr>
       <th>Trip ID</th>
       <th>Status</th>
    </tr>
     <tr>
       <td class="cell-with-id">585</td>
       <td class="cell-which-triggers-popup">bar x</td>
    </tr>
         <tr>
       <td class="cell-with-id">444</td>
       <td class="closed">closed</td>
    </tr>
         <tr>
       <td class="cell-with-id">007</td>
       <td class="cell-which-triggers-popup">bar x</td>
    </tr>
         <tr>
       <td class="cell-with-id">987</td>
       <td class="open">open</td>
    </tr>
</table>

JQuery:

      $("tbody tr td.cell-which-triggers-popup").each(function() {
   var cell_value = $(".cell-with-id").html();
              setInterval(function() {
        showPopup(cell_value)    
     }, 3000);
  });

    function showPopup(tr_id){
        $("#popup").dialog({
            width: 300,
            /*height: auto,*/
            resizable: false,
                show: 'blind',
                hide: 'blind',
            open: function(){
                $(this).find("p").html('At Least 10 minutes has expired.<br />Please check the status of the<br />current Bar Crossing.<br />Trip Report ID: ' + tr_id)
            }
        });
    }

Answer 1

这是因为对话框正在显示 id="popup"的元素，而且只有一个。如果您想弹出多个对话框，则每次都需要创建一个新元素:

var $dialog = $("#popup").clone();
$dialog.dialog( DIALOG_OPTIONS );