javascript - Jquery/Ajax - 如果所有表单都具有相同的类，如何确定要序列化哪个表单？

Question

在我的 mainPage.html 上，我动态创建了多个表单，每个表单在其输入标签中都有不同的值。这是我的 mainPage.html:

<form class='voteForm' method="post" action="/post/likePost/">
    <button class="voteButton" type="submit">
    </button>
    <input type="hidden" name="postID" value="1" />
</form>

<form class='voteForm' method="post" action="/post/likePost/">
    <button class="voteButton" type="submit">
    </button>
    <input type="hidden" name="postID" value="2" />
</form>

<form class='voteForm' method="post" action="/post/likePost/">
    <button class="voteButton" type="submit">
    </button>
    <input type="hidden" name="postID" value="3" />
</form>

如您所见，这三种形式都相似，只是它们的值不同。现在，这是我的 JS 函数

<script type='text/javascript'>
$('.voteForm').click( function() {
        event.preventDefault();
        alert($('.voteForm').serialize());
});
</script>

问题是，每当我点击任何一个表格时，它都会自动假设点击的表格是输入值为“3”的最后一个表格，所以无论是哪个表格，它都会不断改变数字 3我点击。我假设这是因为我做了

$('.voteForm').click

所有三种形式都具有相同的类，因此它会自动采用最后一种形式并运行函数。我如何才能让它采用我单击的按钮的形式并在不更改类或向表单添加 ID 的情况下提醒单击的表单的输入值？有办法吗？我需要所有表单都相同(除了它们的输入值)。

Answer 1

您的点击事件处理程序获得了对被点击按钮的引用，作为回调函数的 this 上下文。用它来选择正确的形式:

$('.voteForm').click( function() {
    event.preventDefault();
    alert($(this).closest('form').serialize());
});

更好的是，重新构建您的标记，使您拥有单一表单，或者根本没有表单，并且只使用被单击的内容的值。为此，使用三种表单都提交到相同的 URL 有点奇怪。