Question

我在这里创建了一个html网页：

http://diagrams.inse1d.info/wbt.html

代码：

<!DOCTYPE html>
<html>
<head>
    <title>WBT Charts</title>
    <link rel="stylesheet" type="text/css" href="wbt.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="wbt.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
    <section>
        <article>
            <div id="wbtBlock">
                <p>Press enter to save amendments</p>
                <h1>Title of wbt:<input type="text" id="wbtTitle" /></h1>
                <div id="graph">
                    <p>Graph to go here</p>
                </div>
                <p><strong>Notes: </strong></p>
                <p><span><input type="textarea" id="wbtNote" /></span></p>
            </div> 
        </article>
    </section>
    <button>Add New WBT Chart</button>
</body>

这是我写的jQuery代码：

$(document).ready(function() {
$("h1").keypress(function(e) {
    //get
    wbtTitle = $('#wbtTitle').val();
    // Write text after enter
    if (e.which == 13) {
        $("h1").text(wbtTitle);
    }

});

$("span").keypress(function(e) {
    //get
    wbtNote = $('#wbtNote').val();
    // Write note after enter
    if (e.which == 13) {
        $("span").text(wbtNote);
    }

});

//Insert new WBT on button click
$("button").each(function() {
    $(this).click(function() {
        var wbtSet = $( "article" ).html();
        $(wbtSet).insertAfter('section');
    });
});
});

我想要做的是使用使用jQuery工作的输入框设置标题和一些注释文本。然后我想在按下按钮时将html的副本添加到另一篇文章中而不复制先前输入的输入，并且可以在克隆文章时设置新值。这个过程应该反复重复。

这是一张有助于解释的图片： Explanation

我是jQuery的新手，我认为你需要使用循环来解决这个问题，我读到.each（）可以使用http://api.jquery.com/jQuery.each/但不太确定。

任何帮助将不胜感激。感谢。

Answer 1

修复hitokun_s给出的答案

window.onload = function() {
    // Save a copy of the element wbtSet element on pageload
    var wbtSet = $("article").clone(); 
    $("button").each(function() {
        $(this).click(function() {
            // Append a new one to the holder of the wbSets
            $(wbtSet).appendTo($('section'));
        });
    });
}

Answer 2

我想我得到了答案。

我稍微更改了html，因为你用你的方法复制了一些id，这并不好。 id必须在页面上是唯一的。我只是把它们改成了类。

<!DOCTYPE html>
<html>
<head>
    <title>WBT Charts</title>
    <link rel="stylesheet" type="text/css" href="wbt.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="wbt.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
    <section>
        <article>
            <div class="wbtBlock">
                <p>Press enter to save amendments</p>
                <h1>Title of wbt:<input type="text" class="wbtTitle" /></h1>
                <div class="graph">
                    <p>Graph to go here</p>
                </div>
                <p><strong>Notes: </strong></p>
                <p><span><input type="textarea" class="wbtNote" /></span></p>
            </div> 
        </article>
    </section>
    <button>Add New WBT Chart</button>
</body>

当然是jQuery。我摆脱了你的前两个功能，因为它们在这种情况下没有任何意义。

$(document).ready(function() {
//Insert new WBT on button click
    $("button").on('click', function() {
        var title = $(this).prev().find('.wbtTitle').val();
        var note = $(this).prev().find('.wbtNote').val();
        var wbtSet = $(this).prev("section").html();       

        $(this).prev().find('.wbtTitle').replaceWith(title);
        $(this).prev().find('.wbtNote').replaceWith(note);

        $(this).prev("section").after('<section>' + wbtSet + '</section>');
    });
});

这是一个有效的fiddel

Answer 3

我认为这就是你想要做的。

window.onload = function() {
            $("button").each(function() {
                $(this).click(function() {
                    var wbtSet = $("article:first-child").clone();
                    wbtSet.find("input").val("");
                    $(wbtSet).appendTo($('section'));
                });
            });
        }

jQuery .insertAfter（）复制输入字段值

3 个答案: