Блог

Привет, как я могу добавить значение текстового поля при нажатии кнопки к ярлыку следующим образом

http://jsfiddle.net/NT4Zr/29/

В приведенном выше коде пользователь может ввести свое хобби и добавить в форму, используя ссылку добавить хобби. когда пользователь нажимает добавить ссылку хобби, значение текстового поля должно быть добавлено к ярлыку, и для каждой записи динамически создается новая метка.

после добавления хобби пользователь может свободно удалять хобби, используя кнопку удаления.

как я могу это сделать?

Будет ли что-то вроде приведенного ниже того, что вы ищете?

 <!-- 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>
  

Некоторые замечания по этой реализации:

• Я предпочитаю использовать неупорядоченный список поверх таблицы, потому что это меньше работы и, возможно, более семантически корректно.
• Если вам нужно добавить элемент ввода (или аналогичный) в форму, чтобы отслеживать, какие хобби были добавлены, это достаточно просто сделать (просто следуйте приведенному выше шаблону для создания, добавления и удаления элементов; в настоящее время обработчик удаления удаляет только элемент списка, но он может удалить элемент списка).также элемент ввода. Однако я не был уверен, как вы планируете обрабатывать эти данные, поэтому неясно, какую информацию лучше всего размещать во входных элементах.
• Я удалил несколько элементов HTML (например, заголовок «Хобби», кнопка отмены), поскольку они, казалось, загромождали пример. Нет причин, по которым их нужно опускать, но я надеялся сохранить краткость.