存儲對象數組 ang 然后檢查上一項和下一項
[英]storing array of objects ang then check previous and next item
問題描述
我應該能夠為用戶 A 和用戶 B 添加輸入，當我單擊上一個時，它將顯示前一個，當我單擊下一個時，它將來回顯示下一個輸入。 謝謝你的幫助。
它會在我們點擊下一步之后詢問用戶 A 的輸入，然后當我點擊返回時它會詢問用戶 B 的輸入，它應該顯示前一個用戶的輸入，如果我點擊下一步，如果將顯示下一個用戶。
但是當我繼續導航 next 和 prev 時，它不再顯示數據。 這家伙有什么問題嗎？
//event.js const showModal = document.querySelector("#showModal"); const modal = document.querySelector(".modal"); const nextBtn = document.querySelector("#next-btn"); const prevBtn = document.querySelector("#prev-btn"); let userText = document.querySelector(".user-text"); showModal.addEventListener("click", e => { modal.setAttribute("style", "display:block"); }); nextBtn.addEventListener("click", e => { userText.textContent = "User B"; prevBtn.setAttribute("style", "display:inline-block"); }); prevBtn.addEventListener("click", e => { userText.textContent = "User A"; prevBtn.setAttribute("style", "display:none"); }); //class.js const mainForm = document.querySelector("#mainForm"); const fnameValue = document.querySelector("#fname"); const lnameValue = document.querySelector("#lname"); const idValue = document.querySelector("#idValue"); class User { constructor() { this.userArrHolder = []; } addUser(id, fname, lname) { const newAddedUser = { id: id, fname: fname, lname: lname, }; if (this.userArrHolder.length > 0) { // displaying first user in ui this.userArrHolder.forEach(item => { idValue.value = item.id; fnameValue.value = item.fname; lnameValue.value = item.lname; console.log("display A"); }); // adding the second user this.userArrHolder.push(newAddedUser); } else { // add new user this.userArrHolder.push(newAddedUser); fnameValue.value = ""; lnameValue.value = ""; } } // looping thru array displayUser(id) { idValue.value = id; this.userArrHolder.forEach((item, index) => { idValue.value = item.id; fnameValue.value = item.fname; lnameValue.value = item.lname; }); } } const newUser = new User(); mainForm.addEventListener("submit", e => { e.preventDefault(); // validating if adding a user or display if (!idValue.value) { let id = Math.floor(Math.random() * 10000); newUser.addUser(id, fnameValue.value, lnameValue.value); console.log("add", newUser.userArrHolder); } else { newUser.displayUser(idValue.value); console.log("display", newUser.userArrHolder); } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="index.css" /> <title>Document</title> </head> <body> <div class="show-modal"> <button id="showModal">Show Modal</button> </div> <div class="modal"> <div class="modal-wrapper"> <p class="user-text">User A</p> <form action="" id="mainForm"> <label for="fname">First Name:</label><br /> <input type="text" name="fname" id="fname" /><br /> <label for="lname">Last Name:</label><br /> <input type="text" name="lname" id="lname" /> <div class="btn-container"> <button type="submit" id="prev-btn" class="pr" style="display: none" > Prev </button> <button type="submit" id="next-btn">Next</button> </div> <input type="text" name="idValue" id="idValue" /> </form> </div> </div> </body> </html>
1 個解決方案
解決方案1
0 2021-06-29 18:46:06
考慮以下示例（將 jQuery UI 用於對話框）
$(function() { var Users = []; var pos = 0; function showPrev() { pos--; showUser(Users[pos]); if (pos == 0) { $("#show-users ~ div.ui-dialog-buttonpane div.ui-dialog-buttonset button:eq(0)").addClass("hidden"); } if ($("#show-users ~ div.ui-dialog-buttonpane div.ui-dialog-buttonset button:eq(1)").hasClass("add-user")) { $("#show-users ~ div.ui-dialog-buttonpane div.ui-dialog-buttonset button:eq(1)").html("Next").removeClass("add-user ui-priority-primary"); } } function showNext() { if ($("#show-users ~ div.ui-dialog-buttonpane div.ui-dialog-buttonset button:eq(1)").hasClass("add-user")) { addUser($("#fname").val(), $("#lname").val()); showUser(Users[Users.length - 1]); pos = Users.length - 1; $("#show-users ~ div.ui-dialog-buttonpane div.ui-dialog-buttonset button:eq(1)").html("Next").removeClass("add-user ui-priority-primary"); } else { pos++; if (pos == Users.length) { showUser({ fname: "", lname: "", id: "" }); $("#show-users ~ div.ui-dialog-buttonpane div.ui-dialog-buttonset button:eq(1)").html("Add").addClass("add-user ui-priority-primary"); } else { showUser(Users[pos]); } } if (pos != 0) { $("#show-users ~ div.ui-dialog-buttonpane div.ui-dialog-buttonset button:eq(0)").removeClass("hidden"); } } function newUser(fname, lname) { return { id: Math.floor(Math.random() * 10000), fname: fname, lname: lname }; } function addUser(fname, lname) { Users.push(newUser(fname, lname)); } function showUser(data, $target) { $target = ($target != undefined ? $target : $("#show-users")); $("#fname", $target).val(data.fname); $("#lname", $target).val(data.lname); $("#idValue", $target).val(data.id); } function makeTable(arr, $target) { $target = ($target != undefined ? $target : $("body")); var tbl = $("<table>", { class: "ui-widget ui-corner-all" }).css({ width: "100%", borderCollapse: "collapse", }); if ($target != false) { tbl.appendTo($target); } if (arr.length == 0) { return tbl; } var head = $("<thead>", { class: "ui-widget-header" }).appendTo(tbl); var body = $("<tbody>", { class: "ui-widget-content" }).appendTo(tbl); $("<tr>").appendTo(head); $("<th>").html("ID").appendTo($("tr", head)); $("<th>").html("First Name").appendTo($("tr", head)); $("<th>").html("Last Name").appendTo($("tr", head)); $.each(arr, function(i, row) { $("<tr>").appendTo(body); $.each(row, function(k, v) { $("<td>", { class: "ui-widget-content" }).html(v).appendTo($("tr:last", body)); }); }); $("tr", body).eq(pos).addClass("ui-priority-primary"); return tbl; } addUser("John", "Smith"); addUser("Jane", "Smith"); showUser(Users[pos]); $("#show-users").dialog({ autoOpen: false, modal: true, buttons: [{ text: "Prev", class: (pos != 0 ? "" : "hidden"), click: showPrev }, { text: "Next", click: showNext }, { text: "Cancel", click: function() { $(this).dialog("close"); } } ] }); $("#showModal").click(function() { $("#show-users").dialog("open"); }); $("#showAll").click(function() { var dlg = $("<div>", { title: "All Users" }).html(makeTable(Users, false)); dlg.dialog({ modal: true, autoOpen: true, close: function() { $(this).dialog("destroy"); dlg.remove(); } }); }); });
#mainForm label, #mainform input { display: block; margin-bottom: 3px; } .ui-dialog .ui-dialog-buttonset button.hidden { display: none; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="show-modal"> <button id="showModal">Show Modal</button> </div> <div class="show-all"> <button id="showAll">Show All Users</button> </div> <div class="modal" title="Show Users" id="show-users"> <form action="" id="mainForm"> <label for="fname">First Name:</label> <input type="text" name="fname" id="fname" /> <label for="lname">Last Name:</label> <input type="text" name="lname" id="lname" /> <input type="hidden" name="idValue" id="idValue" /> </form> </div>
如果您選擇不使用 jQuery UI 對話框窗口，其他功能和基本思想仍然適用。
您將擁有一個用戶數組和一個指針或索引計數器，這將設置為0或數組的特定索引。 這些應該可用，以便您可以根據需要閱讀或修改它們。 然后，您將擁有各種功能來根據用戶交互更新 UI 和修改數據。
- Prev - 減少指針並顯示數組中的上一個用戶數據
- 不能低於
0索引 - 當指針為
0時隱藏上一個按鈕
- 不能低於
- Next - 增加指針並顯示數組中的下一個用戶數據
- 不能超過最后一個索引
- 如果超出最后一個索引，則清除新用戶條目的表單
- 當指針不為
0時顯示上一個按鈕
使用前一個數組的內容更新對象數組中的下一個數組
[英]Updating next array in the array of objects with content from previous array
Javascript forEach（）通過數組：如何獲取上一個和下一個項目？
[英]Javascript forEach() through an array: how to get the previous and next item?
Typescript - 從字典或數組中動態獲取下一個和上一個項目
[英]Typescript - Get next and previous item from dictionary or array dynamically
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.