存储对象数组，然后检查上一个和下一个项目
Posted
技术标签:
【中文标题】存储对象数组，然后检查上一个和下一个项目【英文标题】：storing array of objects ang then check previous and next item 【发布时间】：2021-09-08 18:46:46 【问题描述】：我应该能够为用户 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>【问题讨论】：
你的<script>标签不应该是inside正文吗（右之前结束</body>而不是之后 i> 它）？
什么意思？
在您的 HTML 文件中，<script src="event.js"></script> 和 <script src="class.js"></script> 位于 结束 </body> 标记之后；他们不应该是之前吗？
不，它正在工作，我要问的问题是逻辑上的
欢迎来到 Stack Overflow。你在哪里存储这个数组？当您转到 Next pr Previous item 时会发生什么？请提供一个最小的、可重现的示例：***.com/help/minimal-reproducible-example
【参考方案1】：
考虑以下示例（对 Dialog 使用 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 Dialog 窗口，其他功能和基本思想仍然适用。
您将拥有一个用户数组和一个指针或索引计数器，这将设置为0 或数组的特定索引。这些应该可用，以便您可以根据需要阅读或修改它们。然后，您将拥有各种功能来更新 UI 并根据用户交互修改数据。
0 索引
当指针为0 时隐藏上一个按钮
下一步 - 增加指针并显示数组中的下一个用户数据
不能超过最后一个索引
如果新用户条目超出最后一个索引，则清除表单
当指针不是0 时显示上一个按钮
【讨论】：
以上是关于存储对象数组，然后检查上一个和下一个项目的主要内容，如果未能解决你的问题，请参考以下文章