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

发布于 2024-10-29 21:15:52 字数 557 浏览 1 评论 0原文

我有一个像这样的表：

<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，而不是实际单击的那个。那么我哪里出错了？

原文

I've got a table like this:

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

And I'm using this jQuery to select the stop id that the user clicked.

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

Yet my variable stopId always ends up being the first stopId in the table and not the one that was actually clicked. So where am I going wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烏雲後面有陽光 2024-11-05 21:15:52

您可能想要更改为

$(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>

You might want to change to

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

and the HTML becomes

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

回复收藏 0 原文

风铃鹿 2024-11-05 21:15:52

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

回复收藏 0 原文

夏の忆 2024-11-05 21:15:52

您可以使用 $(this) 来引用选择器。另外，如果类在同一页面上多次出现，则应使用类而不是 ID。

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

http://jsfiddle.net/Vrmhv/

You can use $(this) to reference the selector. Also you should use class instead of ID if it shows up multiple times on the same page.

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

http://jsfiddle.net/Vrmhv/

回复收藏 0 原文

淡紫姑娘！ 2024-11-05 21:15:52

这里的关键是“id”和“class”属性之间的区别——这是一个常见的混淆来源，也是值得理解的。

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

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

请参阅此问题：div 类与 id