JQuery。隐藏一个div和另一个在第一个地方

Question

我有以下代码。 （形式是在开始隐藏）

HTML

<div1 id="js_sel1"> 
    <p> this is selct 1 </p> 
    <a class="js_showform" data-id="1" href="#">edit1</a> 
</div> 
<div2 id="js_sel2"> 
    <p> this is select 2 </p> 
    <a class="js_showform" data-id="2" href="#">edit2</a> 
</div> 
<div3 id="js_sel3"> 
    <p> this is select 3 </p> 
    <a class="js_showform" data-id="3" href="#">edit3</a> 
</div> 
<form id="js_form" class="js_hide_form"> 
    <p> this is my form </p> 
    <a class="js_hideform" href="#">save</a> 
</form> 

jQuery的

$(function() { 
    var par = $('.js_hide_form'); 
    $(par).hide(); 
    $('.showform').click(function(e) { 
     e.preventDefault(); 
     var hide_ele = "#js_sel" + $(this).data("id"); 
     var show_ele = "#js_form"; 
     $(hide_ele).hide; 
     $(show_ele).show; 
    }); 
    $('.hideform').click(function(e) { 
     e.preventDefault(); 
     var hide_ele = "#js_form"; 
     var show_ele = "#js_sel" + $(this).data("id"); 
     $(hide_ele).hide; 
     $(show_ele).show; 
    }); 
}); 

在启动，form标签是隐藏的。点击任何编辑（如div2的编辑2），我希望特殊的div（ex div2）应该消失，表格应该出现在DIV的特定区域（这里是div2）。

如果你能帮助我，我会非常感激。 TY :)

Answer 1

纠正您的div并尝试JS：

<div id="js_sel1"> 
     <p> this is selct 1 </p> 
     <a class="js_showform" data-id="1" href="#">edit1</a> 
    </div> 
    <div id="js_sel2"> 
     <p> this is select 2 </p> 
     <a class="js_showform" data-id="2" href="#">edit2</a> 
    </div> 
    <div id="js_sel3"> 
     <p> this is select 3 </p> 
     <a class="js_showform" data-id="3" href="#">edit3</a> 
    </div> 
    <form id="js_form" class="js_hide_form"> 
     <p> this is my form </p> 
     <a class="js_hideform" href="#">save</a> 
    </form> 

JS：

 $(function() { 
    $('div[id^="js_sel"] .js_showform').on('click',function(){ 

var parent = $(this).closest('div[id^="js_sel"]'); 

$('#js_form').clone().insertBefore(parent); 
parent.hide(); 
parent.prev().show(); 
}); 
$('body').on('click','.js_hide_form a',function(){ 
console.log(this); 
    $(this).parent().next().show(); 
    $(this).parent().hide(); 

}); 

}); 

https://jsfiddle.net/9h8r7akt/1/

或：

$(function() { 
    $('div[id^="js_sel"] .js_showform').on('click',function(){ 

var parent = $(this).closest('div[id^="js_sel"]'); 

$('#js_form').detach().insertBefore(parent); 
$('div[id^="js_sel"] ').show(); 
parent.hide(); 
parent.prev().show(); 
}); 
$('body').on('click','.js_hide_form a',function(){ 
console.log(this); 
    $('div[id^="js_sel"]').show(); 
    $(this).parent().hide(); 

}); 

}); 

https://jsfiddle.net/9h8r7akt/3/

Answer 2

请看看这个运行的代码片段：

$(function() { 
 
    var par = $('.js_hide_form'); 
 
    $(par).hide(); 
 
    $('.js_showform').click(function(e) { 
 
     e.preventDefault(); 
 
     var hide_ele = "#js_sel" + $(this).data("id"); 
 
     var show_ele = "#js_form"; 
 
     if($(show_ele).is(":visible")) 
 
     return; 
 
     
 
     $(".js_hideform").data("id",$(this).data("id")); 
 
     $(hide_ele).hide(); 
 
     $(hide_ele).after($(show_ele).detach()); 
 
     $(show_ele).show(); 
 
    }); 
 
    $('.js_hideform').click(function(e) { 
 
     e.preventDefault(); 
 
     var hide_ele = "#js_form"; 
 
     var show_ele = "#js_sel" + $(this).data("id"); 
 
     $(hide_ele).hide(); 
 
     $(show_ele).show(); 
 
     
 
     
 
     $("#js_sel3").after($(hide_ele).detach()); //js_sel3 is the id of element after which we want the form should go back 
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="js_sel1"> 
 
    <p> this is selct 1 </p> 
 
    <a class="js_showform" data-id="1" href="#">edit1</a> 
 
</div> 
 
<div id="js_sel2"> 
 
    <p> this is select 2 </p> 
 
    <a class="js_showform" data-id="2" href="#">edit2</a> 
 
</div> 
 
<div id="js_sel3"> 
 
    <p> this is select 3 </p> 
 
    <a class="js_showform" data-id="3" href="#">edit3</a> 
 
</div> 
 
<form id="js_form" class="js_hide_form"> 
 
    <p> this is my form </p> 
 
    <a class="js_hideform" href="#">save</a> 
 
</form>