Question

每次单击ADD按钮时，都有一个表单要克隆此表单。我的问题是：如何才能首次设置display none？当点击添加按钮设置显示块时，下一次只需克隆div？

＆＃13;

$(document).ready(function(){
    $(".Add").click(function(){
	$(".formi").eq(0).clone().insertAfter(".formi:last");
	$(".cancel").click(function () {
    $(this).parents('.formi').remove();
      });
    });
});

＆＃13;

.formi{border:1px solid #000;width:50%;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
    <form class="formi">
        <input type="text" placeholder="name" />
        <select name="cars">
          <option value="">one</option>
          <option value="">two</option>
        </select>
        <button type="submit">ok</button>
        <span class="cancel">Cancel</span>
    </form>
</div>

＆＃13;

由于

Answer 1

您可以从CSS规则开始，即display:none;。插入元素时使用.show()。

我还建议在动态生成元素时使用.on()方法实现Event Delegation方法。

＆＃13;

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi").eq(0).clone().show().insertAfter(".formi:last");
    
  });
  $('.all').on('click', ".cancel", function() {
      $(this).closest('.formi').remove();
    });
});

＆＃13;

.formi {
  border: 1px solid #000;
  width: 50%;
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

＆＃13;

Answer 2

尝试隐藏/显示隐藏元素

$(document).ready(function() {
  $(".formi").hide(); //hide it at page ready you can use css for this
  $(".Add").click(function() {

    $(".formi").eq(0).clone().insertAfter(".formi:last").show(); //show it after you appended it 

  });
  $('.all').on('click', ".cancel", function() {
    $(this).parents('.formi').remove();
  });
});

.formi {
  border: 1px solid #000;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

委派您的取消点击事件并从第一个事件

中解开它

Answer 3

我认为你可以在你的＆＃34;点击添加＆＃34;之前做这样的事情。 document.getElementsByClassName("youClass").style.display="none";

然后当你想再次显示它时你改变了display="theOneyouWant"（我想点击添加时）

Answer 4

＆＃13;

$(document).ready(function() {
  $(".Add").click(function() {
    $(".hide").removeClass("hide");//remove the class hiding the form
    $(".formi").eq(0).clone().insertAfter(".formi:last");
    $(".cancel").click(function() {
      $(this).parents('.formi').remove();
    });
  });
});

＆＃13;

.formi {
  border: 1px solid #000;
  width: 50%;
}
.hide {
  display:none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi hide"> 
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

＆＃13;

添加类隐藏，然后单击

将其删除

Answer 5

单击添加类激活并以正常形式make display none

 form {
  display: none;
 }
 form.active {
   display: block;
 }

jquery克隆div第一次

5 个答案: