JavaScript更高效的代码隐藏所有元素期望clost

我有大约20个窗体。当关闭窗体的A按钮应该取消隐藏。JavaScript更高效的代码隐藏所有元素期望clost

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

这是我在做它

$(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> [email protected] </p> 
    </div> 
    <form id="name-form" class="new-form1 hidden" method="POST" action=""> 
    <input id="email"> 
<button type="submit"> Submit </button> 
    </form>

的样品，但我有麻烦隐藏先前激活的形式。

有没有办法让这个效率更高并隐藏以前激活的表单。

我已经tryed这也

<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小提琴https://jsfiddle.net/0p2brLww/2/

来源

2016-09-15 David Gonzalez

你有20种** **隐藏形式...当一个按钮被点击的形式取消隐藏？ –

你能否提供更多的细节，如果可能的话还有小提琴。 – Sasikumar

你介意把你所拥有的基本工作小提琴放在一起吗？除此之外，我会建议查看jQuery中的'.each（）'功能。您基本上会创建一个关闭所有打开窗体的函数，然后在您单击切换时运行该函数。 – Frits

你可以尝试这样的事情一个单一的点击事件所有按钮+形式

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

});

来源

2016-09-15 06:44:42 madalinivascu

这有语法错误 –

已更新我的代码 – madalinivascu

试试这个小提琴https://jsfiddle.net/0p2brLww/2/ –

这应该工作...

$(document).ready(function() { 
 
\t $('button').click(function(e) { 
 
    \t 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>

来源

2016-09-15 07:19:11

加入到由@madalin vascu给出的答复，我想建议你应该使用事件代表团在这种情况下。

事件代表团允许我们附加一个单一的事件侦听器，以父元素，将火了选择匹配的所有后代，无论是现在存在的或将来添加这些后代。

总结所有的div形式和通话功能是这样的：

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

退房的jsfiddle：

Here is the fiddle

来源

2016-09-15 07:23:54 Jagrati

JavaScript更高效的代码隐藏所有元素期望clost

回答

相关问题