Question

这个小“app”的目标是键入文件名，粘贴HTML文档，当您单击“提交”时，“提交”按钮下方会出现一个橙色块，表示您输入的文件名和提取的CSS课程和ID。

现在，当您粘贴HTML代码时，它会在控制台中返回正确的响应，但我想在提交按钮下方的小代码块中显示它，如我的示例所示。

每当您粘贴新代码+新文件名并点击提交时，第一个第二个块就会出现在第一个块后面，并带有新文件名和提取类。

这是我想复制的代码+填充了提交时插入的文件名/类：

<div id="classes">
    <div class="pageTitle">%filename%</div>
    <div class="cssClassesIDs">
        %classes%
    </div>
</div>

我不确定如何在提交时重复复制并附加此代码结构。

Answer 1

这是一个经过修改的JSFiddle：

http://jsfiddle.net/xcqa5/1/

var codeNameVal = $('input#codeName').val();
var newClone = $('#classes').clone();
$(newClone).find('div.pageTitle').html(codeNameVal);
$(newClone).find('div.cssClassesIDs').html(uniqueNames.join(','));
$('#container').append(newClone);
$(newClone).show();

基本上你有一个隐藏的div，它按照你想要的方式构建。当他们单击提交时，您克隆该隐藏的div，将内部值设置为您需要的值，然后将该div附加到容器div的末尾。完成后，使用show()显示新克隆的div。

Jquery clone()

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

和append()

https://api.jquery.com/append/

使用jQuery在提交时附加一段代码

1 个答案: