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

开始时，隐藏表单标记。点击任何编辑（div2的前编辑2），我希望特定的div（ex div2）应该消失，表格应该出现在DIV的特定区域（这里，div2）。

如果你能帮助我，我会非常感激。 TY：）

Answer 1

请查看此正在运行的代码段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

纠正你的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/

JQuery .hide一个div和.show另一个在第一个

2 个答案: