ユーザーがメール アカウントを追加したい場合はメール フィールドを追加できるようにし、フィールドを追加したくない場合は削除を押します。ただし、削除ボタンを機能させることはできません。また、各クラスに変数 emailCount を含めることで各クラスを何らかの方法で区別しようとしましたが、何らかの理由で機能していません...
jquery スクリプトは次のとおりです (ドキュメント対応関数内にあります)。
var i = 0;
$(function(){
i =+ 1;
var emailCount = "Email" + i.toString();
console.log(i);
console.log(emailCount);
$('.addEmail').click(function() {
$('#addInfo').append('<div class="' + emailCount '"></div><form class="newEmail", method="post", action="newEmailPost"> <label>' + emailCount + '</label>' + '<input name="' + emailCount + '", type="email", value=""/><br><input type="submit", class="addNewEmail", value="Save Email"></input><button class="removeEmailField">Remove</button></form><br>');
});
$('.removeEmailField').click(function() {
$(emailCount).remove();
});
});
jade ファイルは次のとおりです: (正しく動作しますが、視覚的な目的には役立つかもしれません)
extends layout
block content
div.centerContent
div
form.validateForm(method="POST", action="/editUserProfile")
legend Edit Profile
input(type="text", name="firstName", maxlength="20", placeholder=ufirstName, value=ufirstName)
br
input(type="text", name="lastName", maxlength="20", placeholder=ulastName, value=ulastName)
br
input(type="email", name="email", maxlength="20", placeholder=uemail, value=uemail)
br
- if(uemailList.length > 0)
for userC in uemailListCount
for userE in uemailList
input(type="email", name=userC, maxlength="20", placeholder=userE, value=userE)
br
input(type="number", name="phone", maxlength="20", placeholder=uphone, value=uphone)
br
input(type="date", name="birthday", value=ubirthday)
br
input.btn.btn-primary(type="submit", name="Update", value="Save")
a(href="/userProfile")
button.btn(type="button") Cancel
hr
div#addInfo
label Add another email address:
button.addEmail Add Email
br
label Add another phone number:
button.addPhone Add Phone Number