Question

我希望有人可以帮助我。

我需要克隆隐藏文本，并且无论隐藏文本的状态如何，都要删除克隆。现在隐藏文本将显示，克隆时，它会生成克隆，但删除功能不适用于克隆。相反，克隆副本的文本的删除功能会影响克隆。我希望克隆副本能够保存与隐藏文本相同的事件，但与复制的状态无关。

我试图弄清楚如何使用克隆和删除方法与我正在构建的表。我用.data（array [1]）和.hide和.show在线搜索。但为了让我的想法发挥作用，我需要尽可能使用删除和克隆！

我很欣赏它！

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
var count = 1;
var $clone = $(".t1").clone(true)
$(document).ready(function(){
    $(".hide0").click(function(){
        $(".t0").hide();
    });
    $(".show0").click(function(){
        $(".t1 , .t0").show();
    });

    $(".hide1").click(function(){
        $(".t1").remove();
    });
    $(".show1").click(function(){
    if(count < 2) {
        $(".t1").clone(false).appendTo("body");

        count++;
        }
    });

});
</script>
</head>
<body>

<div class="t0">Original Text. <br /></div>
<button class="show0">Add Project</button>
<br />

<div class="t1" style="color:red; display:none;">
Hidden Text when removed, clone copy is removed and cannot be regenerated. Clone copy should hold the same events as the original but independent of the status it was copied from. <br>
<button class="show1">Add Project</button>
<button class="hide1">Remove Project</button><br /></div>

<div class="t2" style="color:blue; display:none;">
If you click on the "Hide" button, I will disappear.<br>
<button class="hide2">Remove Project</button><br /></div>

</body>
</html>

Answer 1

我相信你的问题是如何处理动态创建元素的事件（在这种情况下，按钮在t1类中添加和删除）。

<强>代码

  $(document).on("click", ".show1", function(e) {

    if ($(".t1").length < MaxRows) {
      addRows();
    }

  });

  $(document).on("click", ".hide1", function(e) {

    $(this).parent(".t1").remove();

  });

第二个问题是克隆元素。如果您执行以下操作会更容易：

创建一个名为original
克隆此original
将original班级名称更改为t1
将其附加到row或container课程以保留您的克隆

<强>代码

function addRows() {

  $(".t1-original")
    .clone(false)
    .removeClass("t1-original")
    .addClass("t1")
    .appendTo(".data-rows")
    .show()
    .find(".name").html(new Date().toISOString() + " <br/>");

}

var MaxRows = 3;

function addRows() {

  $(".t1-original")
    .clone(false)
    .removeClass("t1-original")
    .addClass("t1")
    .appendTo(".data-rows")
    .show()
    .find(".name").html(new Date().toISOString() + " <br/>");

}

$(document).ready(function() {

  $(".show0").click(function() {
    // $(".t1 , .t0").show();
    if ($(".t1").length < MaxRows) {
			addRows();
    }
  });

  // .hide0 class does not exist?
  $(".hide0").click(function() {
    $(".t0").hide();
  });

  $(document).on("click", ".show1", function(e) {

    if ($(".t1").length < MaxRows) {
      addRows();
    }

  });

  $(document).on("click", ".hide1", function(e) {

    $(this).parent(".t1").remove();

  });

  // $(".hide1").click(function() {
  //   $(".t1").remove();
  // });

  //$(".show1").click(function() {
  //  if (count < 3) {
  //    $(".t1").clone(false).appendTo("body");
  //
  //    count++;
  //  }
  //});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t0">
  Original Text.
  <br />
</div>

<button class="show0">Add Project</button>
<br />

<div class="t1-original" style="color:red; display:none;">
  <span class="name"></span> Hidden Text when removed, clone copy is removed and cannot be regenerated. Clone copy should hold the same events as the original but independent of the status it was copied from.
  <br>

  <button class="show1">Add Project</button>
  <button class="hide1">Remove Project</button>
  <br />
</div>

<div class="data-rows">

</div>

<div class="t2" style="color:blue; display:none;">
  If you click on the "Hide" button, I will disappear.
  <br>

  <button class="hide2">Remove Project</button>
  <br />
</div>

尽可能有效地克隆和删除方法

1 个答案: