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

回答

相關問題