从textarea镜像值以追加

时间:2014-07-17 13:58:39

标签: javascript jquery

http://jsbin.com/renabuvu/1/edit

我正在做的是我输入一个css选择器,更改它的值,因为它的值改变它适用于页面的html并实时应用。 (这部分没有问题)

但是我的问题是当我追加已添加的值时。我新添加/克隆的textarea结束了空白。

我不知道为什么会这样,也不知道如何解决这个问题。

如果有人能帮助阐明这一点,我们将不胜感激。

$(document).ready(function() {
  $(".addvalz").on('click', function() {
    // Refresh render before add
    $("#testcode").val($(".inputval").val() +" {"+ ( $(".pad").val() === "" ? "" : "\n  padding: " + $(".pad").val() + ";" ) + ( $(".bg").val() === "" ? "" : "\n  background-color: " + $(".bg").val() + ";" ) + ( $(".boxshadow").val() === "" ? "" : "\n  box-shadow: " + $(".boxshadow").val() + ";" ) +"\n}");

    // Adds value
    $(".val-nester").append($("<div class='holddezvalz'>")
     .append("<button class='deldizval'>x</button>")
     .append("<button class='grabdezvalz'>"+ $(".inputval").val() +"</button>").append($("#asc #testcode:first-of-type").clone()).append($(".valz2add .inputval:first-of-type").clone()).append($(".cssvalz .pad:first-of-type").clone()).append($(".cssvalz .bg:first-of-type").clone()).append($(".cssvalz .boxshadow:first-of-type").clone())
);
    $("#apply-test-code").html("<style type='text/css'>"+ $("#testcode").val() +"</style>");

    // Grabs selector value
    $(".grabdezvalz").on('click', function() {
      $(".valz2add .inputval:first-of-type").val($(this).next().next().val());
      $(".cssvalz .pad:first-of-type").val($(this).next().next().next().val());
      $(".cssvalz .bg:first-of-type").val($(this).next().next().next().next().val());
      $(".cssvalz .boxshadow:first-of-type").val($(this).next().next().next().next().next().val());
    });
  });
});

1 个答案:

答案 0 :(得分:0)

http://jsbin.com/renabuvu/2/edit

因为这些值被镜像到textarea而没有应用,所以clone只会将textarea应用于它的设置值而不是镜像/反映在它上面的值。

我必须将其添加为字符串,然后才能完美运行。

$(".val-nester").append($("<div class='holddezvalz'>")
                .append("<button class='deldizval'>x</button>")
                .append("<button class='grabdezvalz'>"+ $(".inputval").val() +"</button>")
                .append("<textarea>"+ $("#asc #testcode:first-of-type").val() +"</textarea>")
                .append($(".valz2add .inputval:first-of-type").clone())
                .append($(".cssvalz .pad:first-of-type").clone())
                .append($(".cssvalz .bg:first-of-type").clone())
                .append($(".cssvalz .boxshadow:first-of-type").clone())
);