Question

所以这是我的问题，我是jQuery的新手。我在这里要做的是检查用户是否单击某个表格单元格/行，然后它将显示一个名为popup的索引与表格单元格 votes 相同。无需为我的表中的所有行创建单独的函数。

使用某个数值将显示第一次点击相同值单元格的所有对话框，第二次只显示正确的对话框。

我打赌还有其他方法可以做到这一点，也许只是一个愚蠢的错误。使用单击和对话框功能中的索引值将无效。

我也对改进建议持开放态度。

脚本：

<script type='text/javascript'>
       $(document).ready( function() {

          $('.votes').each(function(index) {
              $('.votes:eq(index)').click(function() {

                  $('.popup:eq(index)').dialog();

              });
          });

        });
    </script>

表格部分的HTML，只是一个代码段

<td class='votes'>5</td>
<td class='votes'>15</td>
<td class='votes'>25</td>

div部分的HTML，只是div的片段：

<div class='popup'>
    <ul>
        <li>John Johnsson</li>
        <li>John Doe</li>
    </ul>
</div>

<div class='popup'>
    <ul>
        <li>Matt Theman</li>
        <li>Peter Watley</li>
    </ul>
</div>

Answer 1

的 jsFiddle Demo 的

您不必使用each .click进行迭代，这将在内部发生。您可以使用.index()来获取单击该元素的索引，并引用其父元素。

$('.votes').click(function() { $('.popup').eq($(this).index()).dialog(); });

Answer 2

更新

FWIW，这是一个使用jQueryUI对话框（我认为你正在使用它？）和javascript sectionRowIndex和cellIndex的例子。

可重复使用的代码，允许您识别用户点击的单元格并执行适当的操作。

的 http://jsfiddle.net/KbgcL/1/

<强> HTML：

<table id="myTable"> <tr> <th>Label:</th> <th>Washington</th> <th>Idaho</th> <th>California</th> </tr> <tr> <td class='label'>Votes</td> <td class='votes'>5</td> <td class='votes'>15</td> <td class='votes'>25</td> </tr> <tr> <td class='label'>Voters</td> <td class='voters'>5,000</td> <td class='voters'>15,000</td> <td class='voters'>25,000</td> </tr> </table> <div id="msg"></div>

<强>的jQuery / JavaScript的：

var myTr; $('#msg').dialog({ autoOpen:false, title: 'Report:' }); $('#myTable tr td').click(function() { myTr = $(this).closest('td').parent()[0].sectionRowIndex; myCell = this.cellIndex; myState = $('#myTable').find('tr:eq(0)').find('th:eq(' +myCell+ ')').html(); myVoters = $('#myTable').find('tr:eq(' +myTr+ ')').find('td:eq(' +myCell+ ')').html(); if (myTr==2 && myCell==3){ //California $('#msg').html('There are ' +myVoters+ ' voters in ' +myState); $('#msg').dialog('open'); }else if(myTr==1 && myCell==1){ $('#msg').html('There were ' +myVoters+ ' votes made in ' +myState); $('#msg').dialog('open'); } });

Answer 3

最初，主要问题是您没有使用字符串连接将索引应用于选择器（demo）：

$('.votes:eq(index)')
// the Sizzle selector engine doesn't know what the string "index" is.

而不是

$('.votes:eq(' + index + ')')
// using concatenation calls the .toString() method of index to apply "0" (or "1", "2", etc.)
// so that the parsed string becomes '.votes:eq(0)' which the Sizzle selector engine understands

一旦Sizzle选择器引擎了解要定位的元素（demo），第二个问题是jQueryUI如何使用.dialog方法更改DOM。

初始标记：

<table>
    <tbody>
        <tr>
            <td class="votes">5</td>
            <td class="votes">15</td>
            <td class="votes">25</td>
        </tr>
    </tbody>
</table>
<div class="popup">
    <ul>
        <li>John Johnsson</li>
        <li>John Doe</li>
    </ul>
</div>
<div class="popup">
    <ul>
        <li>Matt Theman</li>
        <li>Peter Watley</li>
    </ul>
</div>

处理完第一个单击事件后，其中一个div.popup元素将转换为jQueryUI对话框并追加到主体，将其从初始位置移除，如下所示：

<table>
    <tbody>
        <tr>
            <td class="votes">5</td>
            <td class="votes">15</td>
            <td class="votes">25</td>
        </tr>
    </tbody>
</table>
<div class="popup">
    <ul>
        <li>Matt Theman</li>
        <li>Peter Watley</li>
    </ul>
</div>
<div class="ui-dialog ui-widget ..."> ... </div>

因此您的初始索引不再适用。幸运的是，这两个问题都有几种解决方案（我在下面列出了一些问题）。

问题1的解决方案：

如上所述使用字符串连接。
请改用.eq方法，它将接受index变量原样
使用委托处理程序，并从处理程序中获取索引：

2的例子：

$('.votes').eq(index);

3的例子：

$('table').on('click', '.votes', function (e) {
    var vote = $(this),
        index = vote.parent().index(vote);
});

问题2的解决方案：

最初创建所有对话框并根据需要打开它们。
使用div元素的深层克隆创建对话框。（不推荐）
删除td元素以匹配已删除和重新附加的div元素。（不推荐）

1的例子：

var popups = [];
$('.popup').each(function (i, elem) {
    var popup = $(elem).data('index', i).dialog({
        "autoOpen": false
    });
    popups.push(popup)
});
$('table').on('click', '.votes', function (e) {
    var vote = $(this),
        index = vote.index();
    popups[index].dialog('open');
});

我确信还有其他解决方案，但这些是我想到的最重要的解决方案。

<强> Functional demo: http://jsfiddle.net/2ChvX/2/

<强>更新：

使用您选择的表结构，您实际上正在查找父tr元素的索引，因为它与div.popup元素相对应。要获取父tr元素的索引，请更改从以下位置获取索引的行：

index = vote.index();

为：

index = vote.parent().index();

更新了小提琴：http://jsfiddle.net/AZpUQ/1/

使用each（）检查单击的类

3 个答案: