for循环中生成的按钮未获得正确的值

Question

我有一个动态网页，显示包含多个页面的结果列表。我目前有功能“上一页”和“下一页”按钮，但我想添加像许多网站一样的特定页面按钮，这样您就可以直接转到页码，而不是一次滚动一页。为此，我使用for循环生成页面按钮，因为页面数是可变的。这是我的代码：

@{ var val = 1;}
@for (var i = 1; i <= numPages; i++)
{
    <text> @val </text>
    <button type="submit" class="page-button" value="@val"> @i </button>
    val++;
}

正在生成按钮，除了所有按钮的值都是1.这就是我测试按钮值的方式：

$(".page-button").on("click", function(event) {
    alert($(".page-button").val());
});

每个按钮弹出一个单击“1”的警告，即使@val正在递增（我可以告诉，因为@val显示与它旁边的页面按钮相同的数字）。

我也试过

<button type="submit" class="page-button" value="@i"> @i </button>

但同样，即使按钮上显示的数字是正确的，当我点击它们时，它们的值都是1.为什么没有正确分配值？

Answer 1

我不了解JQuery，但我认为$(".page-button").val()使用class="page-button"获取文档中的所有元素，并返回第一个的值。您需要获取对强制事件的当前元素的引用。

这似乎对我有用：

alert($(this).val());

但我真的不知道我在做什么。