0

我有一个主 div，其中包含多个 div 和一个文本框。在该文本框中，用户键入内容。

用户完成输入内容后，我将复制整个主 div。但是当我复制主 div 时，我只能复制除里面文本框内容之外的所有内容。

我这样做的方法是在 javascript 中复制主 div 的 html。如果有人可以帮助我，我将不胜感激。

Master Div 是这里的createmain1

<div id="createmain1" class="createmainclass1">
  <div id="leftbox1">
    <!--<p>the preview left div</p>-->
    <div id="createmain1leftframe1" style="height: 100%; background-repeat: no-repeat; width: 100%;">
      <div id="createmain1leftframe2" style="height: 100%; background-repeat: no-repeat; width: 100%;">
        <div id="createmain1leftframe3" style="height: 100%; background-repeat: no-repeat; width: 100%;">
          <div id="createmain1leftframe4" style="height: 100%; background-repeat: no-repeat; width: 100%;">
            <textarea id="lefttext1" spellcheck="true" maxlength="500" wrap="hard" style="width: 100%; font-family: 'GillSansLightRegular'; overflow:hidden; resize:none; font-size:20px; border:none; height: 100%; background-color:transparent" placeholder="Enter Text Here"></textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="rightbox1">
    <!--<p>the preview right div</p>-->
    <div id="createmain1rightframe1" style="height: 100%; background-repeat: no-repeat; width: 100%;">
      <div id="createmain1rightframe2" style="height: 100%; background-repeat: no-repeat; width: 100%;">
        <div id="createmain1rightframe3" style="height: 100%; background-repeat: no-repeat; width: 100%;">
          <div id="createmain1rightframe4" style="height: 100%; background-repeat: no-repeat; width: 100%;">
            <textarea id="righttext1" spellcheck="true" maxlength="500" wrap="hard" style="width: 100%; font-family: 'GillSansLightRegular'; overflow:hidden; resize:none; font-size:20px; border:none; height: 100%; background-color:transparent" placeholder="Enter Text Here"></textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我复制的地方是

 <div id="finalimage" style="background-color:lightcoral" ></div>

我写的 JavaScript 是

$("#Preview").click(function () {
  var firstdiv = $("#createmain1").html();
  var lefttext = $("#lefttext1").val();
  $("#finalimage").css("height", "310px");
  $("#finalimage").css("width", "460px");
  $("#finalimage").html(firstdiv);
  $("#finalimage").children("#leftbox1").css("height", "300px");
  $("#finalimage").children("#leftbox1").css("width", "225px");
  $("#finalimage").children("#leftbox1").css("float", "left");
  $("#finalimage").children("#rightbox1").css("height", "300px");
  $("#finalimage").children("#rightbox1").css("width", "225px");
  $("#finalimage").children("#rightbox1").css("float", "left");
  $("#finalimage").children("#lefttext1").val(lefttext);
}
4

2 回答 2

3

当您使用 jQuery - 您是否尝试过使用该.clone()方法？

http://api.jquery.com/clone/

您也在创建具有id不允许的重复属性的 div。

上面的页面解释了如何使用 clone() 并建议：

注意：使用 .clone() 具有产生具有重复 id 属性的元素的副作用，这些属性应该是唯一的。在可能的情况下，建议避免使用此属性克隆元素或使用类属性作为标识符。

于 2013-05-10T15:25:57.757 回答
0

看起来正在发生的事情是你在这里抓住了第一个 div：

var firstdiv = $("#createmain1").html();

添加此代码以模拟 div：

$("#finalimage").html(firstdiv);

而你实际上并没有用它做任何事情。

您也不能复制 ID。我会用 jQuery 在新系统中重建 div，而不是简单地将 html 从一个复制到另一个。

编辑：

我已经包含了一个 jsfiddle 示例供您查看。如果你想保持一切不变，你可以简单地使用 .find() 来抓取文本区域并设置信息。

http://jsfiddle.net/EqaLw/

于 2013-05-10T15:37:22.927 回答