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

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