Ich bin neu in jQuery und JavaScript.
Es ist gelungen, den folgenden Code zum Laufen zu bringen, indem ein neues Texteingabefeld basierend auf der vom Benutzer aus dem (vorherigen) Dropdown-Auswahlfeld ausgew?hlten Zahl hinzugefügt wurde.
<script> $(function() { var input = $('<input placeholder="輸入名稱(chēng)或標(biāo)題..." type="text" required/>'); var newFields = $(''); $('#qty').bind('blur keyup change', function() { var n = this.value || 0; if (n + 1) { if (n > newFields.length) { addFields(n); } else { removeFields(n); } } }); function addFields(n) { for (i = newFields.length; i < n; i++) { var newInput = input.clone(); newFields = newFields.add(newInput); newInput.appendTo('#newFields'); } } function removeFields(n) { var removeField = newFields.slice(n).remove(); newFields = newFields.not(removeField); } }); </script>
Allerdings m?chte ich in <input placeholder="輸入主題或標(biāo)題..." type="text" required/>
zwei Eigenschaften/Parameter für jedes hinzugefügte Feld hinzufügen:
name="subject1", name="subject2"
und so weiter für jedes EingabefeldZum Beispiel sollte die Ausgabe-Eingabebezeichnung für das erste Feld <input placeholder="輸入主題或標(biāo)題..." type="text" name="subject1" required/>
<input>
-Tag
Beispielsweise sollte die Ausgabe-Eingabebezeichnung für das erste Feld ?Subject 1: <input placeholder="輸入主題或標(biāo)題..." type="text" name="subject1" required/>
“Wie implementiert man diese Funktion?
這是一種添加主題標(biāo)題和名稱(chēng)屬性的方法。
您可以使用字符串連接來(lái)實(shí)現(xiàn),使用變量i
。
$(function() { $('#qty').bind('blur keyup change', function() { var n = this.value || 0; createFields(n) }); function createFields(n) { $("#newFields").empty(); //清空字段列表 for (var i = 1; i <= n; i++) { var fieldWrapper = $('<div class="fieldwrapper"/>'); //創(chuàng)建包裝器 var name = $("<p>主題 " + i + "</p>"); //創(chuàng)建主題標(biāo)題 var input = $('<input name="Subject' + i + '" placeholder="輸入名稱(chēng)或標(biāo)題..." type="text" required />'); //創(chuàng)建輸入框 fieldWrapper.append(name); //添加標(biāo)題 fieldWrapper.append(input); //添加輸入框 $("#newFields").append(fieldWrapper); //添加到列表中 } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="qty" type="number" /> <div id="newFields"> </div>