Question

您好我如何在按钮上添加文本框值，点击这样的标签

在上面的代码中，用户可以输入他的爱好，并使用添加爱好链接添加到表单中。当用户按下添加爱好链接时，应将文本框值添加到标签中，并为每个条目动态创建新标签。

添加兴趣爱好后，用户可以使用删除按钮自由删除爱好。

我该怎么做？

Answer 1

以下是您想要的东西吗？

<!-- The container into which new hobbies will be inserted -->
<ul id="hobbies">
</ul>
<form method="post" action="">
    <!-- The form element the user will use to enter new labels. 
         Note that the value of the for attribute of the label element 
         matches the value of the id attribute of the input element -->
    <label for="hobby">Hobby:</label><input type="text" id="hobby" /><br />
    <a id="add-hobby">Add Hobby</a><br />
    <input type="submit" id="saveStudentInfo" value="Save Details" />
</form>

<!-- $(handler) is a shorthand for $(document).ready(handler)
     see http://api.jquery.com/ready/ -->
<script> // would be placed in the HEAD, of course
$(function (){
    $('#add-hobby').click(function () {
        // Extract the input value
        var newHobbyText = $("#hobby").val();

        // Create the list item to add
        var $newHobbyListItem = $("<li></li>").text(newHobbyText);

        // Create the delete link
        var $deleteLink = $("<a></a>").text("Delete").css("margin-left","5px");

        // Register a delete handler (could be done as part of the above line)
        $deleteLink.click(function () {
            $newHobbyListItem.remove();
        });

        // Add the delete link to the list item
        $newHobbyListItem.append($deleteLink);

        // Finally, add the new item to the DOM
        $("#hobbies").append($newHobbyListItem);
    });    
});
</script>

关于此实施的一些注意事项：

我选择在表格上使用无序列表，因为它的工作量较少，而且可以说在语义上更正确。
如果你需要在表单中添加一个输入元素（或类似的元素）来跟踪已经添加的爱好，这很简单（只需按照上面的模式来构建，追加和删除元素;目前，删除handler只删除列表项，但它也可以删除一个输入元素。但是，我不确定你是如何计划处理这些数据的，因此不清楚在输入元素中放置的最佳信息是什么。 / LI>
我删除了一些HTML元素（例如“Hobbies”标题，取消按钮），因为它们似乎使示例混乱。没有理由他们需要被省略，但我希望保持简洁。

如何使用jquery动态添加用户输入的文本框值？

1 个答案: