更有效的代码隐藏所有元素，除了最接近

JavaScript More Efficient code to hide all element expect cloest

本文关键字：最接近 元素 有效 代码 隐藏所      更新时间：2023-09-26

我有大约20个表单。当一个按钮关闭时，窗体应该取消隐藏。

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

我就是这么做的

$(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/

你可以尝试这样做:对所有按钮+表单进行一次点击事件

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

应该可以…

$(document).ready(function() {
	$('button').click(function(e) {
  	var targetForm = e.target.dataset.buttonFor
    $('form').addClass('hidden')
    $("."+targetForm).toggleClass('hidden')
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <label >Name:</label>
    <button type="button" data-button-for="first-name" style="margin-top:7px;"  class="toggle-new-form pull-right btn btn-primary">Edit</button>
    <p> Example first Name </p>
    <form  id="name-form" class="new-form first-name hidden" method="POST" enctype="multipart/form-data" action="">
     <input> 
    </form>
    
    <hr>
    <div class="form-group" style="">
    <label >Shipping &amp; Addresses:</label>
    <button type="button" data-button-for="shipping-address" style="margin-top:7px;"  class="toggle-new-form pull-right btn btn-primary">Edit</button>
    <p> Example Last Name </p>
    </div>
    <form  id="name-form" class="new-form shipping-address hidden" method="POST" enctype="multipart/form-data" action="">
    <input> 
    </form>
    
    <hr>

对于@madalin vascu给出的答案，我建议你在这种情况下应该使用事件委托。

事件委托允许我们在父元素上附加一个事件监听器，它将为所有匹配选择器的后代触发，无论这些后代现在存在还是将来添加。

将所有表单包装在一个div中，并像这样调用函数:

$('.divclass').on('click','[class^= "toggle-new-form"]',function() {});

查看jsfiddle:

小提琴来了

相关文章：