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 =＆＃34; popup＆＃34;，而且只有一个。如果要弹出多个对话框，则每次都需要创建一个新元素：

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

Answer 2

$（＆＃34; .cell-with-id＆＃34;）将从匹配中选择第一个元素。但你需要的是点击元素的兄弟td。而不是使用＆＃39;每个＆＃39;您可以使用单击事件处理程序。为什么你需要一个setInterwel？这将在每3000毫秒触发showPopup。即使用户关闭弹出窗口，它也会重新出现。

$("tbody tr td.cell-which-triggers-popup").click(function() {
      var cell_value = $(this).siblings(".cell-with-id").html();
        showPopup(cell_value)    

}）;

工作小提琴jsfiddle