Question

我有一张这样的桌子：

<table>
    <% foreach (var item in Model.Data) { %>
    <tr>
        <td><a href="#"><div id="stopId"><%: item.StopID %></div></a></td>
        ...
        ...
    </tr>
</table>

我正在使用这个jQuery来选择用户点击的停止ID。

$(function () {
    $("#stopId").live('click', function () {
    var stopId = $("#stopId").html()
        ...
        ...
    });
});

然而，我的变量stopId总是最终成为表中的第一个stopId，而不是实际点击的那个。那么我哪里出错？

Answer 1

您可能想要更改为

$(function () {
    $(".stopId").live('click', function () {
    var stopId = $(this);
        ...
        ...
    });
});

，HTML变为

<table>
    <% foreach (var item in Model.Data) { %>
    <tr>
        <td><a href="#"><div **class**="stopId"><%: item.StopID %></div></a></td>
        ...
        ...
    </tr>
</table>

Answer 2

如果该循环在每次迭代时生成一个新的TR，那么最终会有多个具有相同ID的对象，这是无效的标记。一个ID只能在文档中使用一次，因此jQuery只会费心去寻找一个。一旦找到第一个，就完成了。

Answer 3

您可以使用$(this)来引用选择器。如果它在同一页面上多次出现，你也应该使用class而不是ID。

  $(function () {
        $("#stopId").live('click', function () {
        var stopId = $(this).html()
            ...
            ...
        });
    });

http://jsfiddle.net/Vrmhv/

Answer 4

这里的关键是'id'和'class'属性之间的区别 - 混淆的常见原因和值得理解的东西。

简而言之，'id'属性是页面中元素的唯一标识符，因此页面上每个id都应该只有一个元素。在内部，jQuery使用document.getElementById()来定位元素，该元素只返回一个元素。

对于像stopId这样的非唯一（即重复）标识符，您应该使用'class'属性。对于您的代码，只需将'id='更改为'class='，然后将"#stopId"更改为".stopId"。 jQuery将使用document.getElementsByClassName()来检索具有class="stopId"属性的所有元素。另请注意，您可以拥有多个类（例如class="stopId greenText"）

请参阅此问题：div class vs id

jQuery选择器只选择第一个链接

4 个答案: