JavaScript 更有效的代码来隐藏除衣柜之外的所有元素

Question

我有大约 20 张表格。当 A 按钮时，关闭表单应取消隐藏。

所有其他形式都应保持隐藏。 '

我就是这样做的

$(document).ready(function() {
    console.log( "ready!" );

      $(".toggle-new-form1").click(function() {
    $(".new-form1").toggleClass("hidden");
    // $("input[name='union_name']").focus();
  });
      $(".toggle-new-form2").click(function() {
    $(".new-form2").toggleClass("hidden");
    // $("input[name='union_name']").focus();
  });


});

这是 html 示例

    <div class="form-group" style="">
    <label >Email:</label>
    <button type="button" id="new" style="margin-top:7px;"  class="toggle-new-form pull-right btn btn-primary">Edit</button>
    <p> example@gmail.com  </p>
    </div>
    <form  id="name-form" class="new-form1 hidden" method="POST"  action="">
    <input id="email">
<button type="submit"> Submit </button> 
    </form>

但我无法隐藏以前激活的表单。

是否有办法提高效率并隐藏以前激活的表单。

我也尝试过

<script type="text/javascript">

$(document).ready(function() {
    console.log( "ready!" );

      $(".toggle-new-form").click(function() {
    $(".new-form").addClass("hidden");
     $(this).closest( ".new-form" ).removeClass( "hidden" )
  });


});
</script>

我不知道它是如何工作的

Js fiddle https://jsfiddle.net/0p2brLww/2/

Answer 1

您可以尝试对所有按钮+表单执行这样的单击事件

$(document).ready(function() {
      $('[class^="toggle-new-form"]').click(function() {
       var el = $(this).parent().next();
           $('[class^="new-form"]').not(el).addClass('hidden');
           el.toggleClass("hidden");
     //$(this).parent().next().find("input[name='union_name']").focus();
  });

});