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);
...

现在最有趣的部分...... 如果我按backward链接，我就会

运行idArrow

pageNumber 4

如果我按forward链接，那么我会得到同样的结果！怎么会这样？

运行idArrow

pageNumber 4

Answer 1

您可以将此对象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');

Answer 2

做这样的事情：

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

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

的javascript

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

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

您的问题是，您有两个相同的ID，使它们独一无二，它应该可以解决您的问题

来自标签的值的奇怪行为

2 个答案: