javascript - 如何使用 onClick 在表单元素内切换类？

Question

我正在寻找一些 JS 或 jQuery(无论是插件还是其他)来帮助我操作 jQuery 的验证插件用于表单字段中的表单验证的 class="required"。当单击“删除”按钮时，我需要能够将该类切换为不等于任何内容。

以下是关于为什么我需要能够打开或关闭该类“必需”的更多背景信息:

1) 这是一份针对同一事件的多名参与者的注册表

2) 表单中有一个控件，允许注册者“删除”与会者(如果他/她决定带 2 人而不是 4 人)。这会切换与会者表单元素所在的 DIV 的可见性。我可以看到表单元素属于哪个与会者，因为我的 PHP 循环使用first_name_1(对于第一个与会者)创建了它们，然后第二个与会者将使用first_name_2。然后，每个 div_attendee_1 或 2 或 3 都有其表单字段，并将此计数器附加到每个字段的末尾。

3) 当一个 div 被渲染为visibility="hidden"时，我也会重置该 div 中的表单元素。但我认为我还需要访问 class="required"来呈现它 class=""。

最好的方法是什么？这是迄今为止我用来切换可见性和重置字段值的 jQuery:

验证:

 <script>
  $(document).ready(function(){
    $("#the_form").validate();
  });
  </script>

然后:

<script language="JavaScript">
  function showhidefield(hideablearea){
   document.getElementById(hideablearea).style.visibility = "hidden";
   var el = document.getElementById(hideablearea);
    if ( el.style.display != 'none' ) {
        el.style.display = 'none';
    }
    else {
        el.style.display = '';
    }
    $('#' + hideablearea).hide().find("input").val("");
    $('#' + hideablearea).attr('disabled', true);
  }
</script>

我应该尝试使用inner.html重写元素吗？

谢谢!

Answer 1

改变

$('#' + hideablearea).hide().find("input").val("");

至

$('#' + hideablearea).hide().find("input").val("").removeClass("required");