javascript - 提交时将行值加 1

Question

我想知道如何在提交表单时将 1 添加到嵌套 div 中的值。

<form id="form1" name="form1" method="post" action="" class="submit">
  <table width="30%" border="0" cellspacing="4" cellpadding="4">
    <tr>
      <td width="58%"><div class="fav_count">1</div></td>
      <td width="42%"><input type="submit" name="button" id="button" value="Submit" /></td>
    </tr>
  </table>
</form>
<form id="form2" name="form1" method="post" action="" class="submit">
  <table width="30%" border="0" cellspacing="4" cellpadding="4">
    <tr>
      <td width="58%"><div class="fav_count">2</div></td>
      <td width="42%"><input type="submit" name="button2" id="button2" value="Submit" /></td>
    </tr>
  </table>
</form>
<form id="form3" name="form1" method="post" action="" class="submit">
  <table width="30%" border="0" cellspacing="4" cellpadding="4">
    <tr>
      <td width="58%"><div class="fav_count">3</div></td>
      <td width="42%"><input type="submit" name="button3" id="button3" value="Submit" /></td>
    </tr>
  </table>
</form>
<form id="form4" name="form1" method="post" action="" class="submit">
  <table width="30%" border="0" cellspacing="4" cellpadding="4">
    <tr>
      <td width="58%"><div class="fav_count">4</div></td>
      <td width="42%"><input type="submit" name="button4" id="button4" value="Submit" /></td>
    </tr>
  </table>
</form>

这是一个 fiddle

https://jsfiddle.net/fgu42nxr/

任何有关 jquery 的帮助将不胜感激。谢谢

Answer 1

正如上面评论中提到的，提交表单时不能这样做，因为这会导致页面重新加载。但是，您可以取消默认的表单提交行为并使用ajax或其他东西重新实现它。如果是这样，你可以这样做:

$("#form1").on('submit', function(e){
    e.preventDefault();
    // do some stuff here...
    $(this).find(".fav_count").each(function() {
        $(this).text(+($(this).text()) + 1)
    })
})