javascript - 标签值的奇怪行为

Question

假设 ${currentPage} 的值为 5，即我们位于第五页

有两个链接:

<a id="idArrow" href="#" data-currentpage="${currentPage-1}" title="${currentPage-1}">backward</a>
<!-- the title displays 4 -->

<a id="idArrow" href="#" data-currentpage="${currentPage+1}" title="${currentPage+1}">forward</a>
<!-- note, the title displays 6, it seems ok-->

获取值的脚本:

$('body').on('click', '#idArrow', function() {          
    console.log("running idArrow");
    var pageNumber = $("#idArrow").data('currentpage');
    console.log('pageNumber '+pageNumber);
...

现在是最有趣的部分...... 如果我按后退链接，那么我会得到

running idArrow

pageNumber 4

如果我按前进链接，那么我会得到同样的结果!怎么可能？

running idArrow

pageNumber 4

Answer 1

您可以使用this对象provided by jQuery事件处理函数:

    var pageNumber = $(this).data('currentpage');

请注意，您应该使用唯一的 id 属性。 $("#idArrow") 引用具有该 id 的第一个节点，并解释您所描述的行为。

因此，最好为 on 处理程序提供不同的选择器，例如元素共享的类:

<a class="clsArrow" ... >

代码:

$('body').on('click', '.clsArrow', function(e) {      
    ...
    var pageNumber = $(this).data('currentpage');