我目前有一个类似表单的页面，用户必须先单击一个框(包含数据)，然后才能提交并转到下一页 - 但它不是表单帖子或任何东西(也许有人可以让我知道我这样做是否正确吗？)。但是在下一页上，我希望它显示用户在顶部单击的框。目前我可以返回从框中单击的所有数据，我只需要一种在下一页显示单击框的方法
有人知道我该怎么做吗？我将附上一些图片以使其更加清晰。
我附上了我的第一页 HTML，里面有 4 个框，第二个 HTML 框在顶部(目前硬编码)
如果您需要这方面的更多信息或者它看起来有点乱，请告诉我，以便我整理
谢谢!
$(document).ready(function () {
var data = [];
//Currently gets the box ID
$(".address-box").click(function () {
var box = {};
// get all the nested children
var children = $(this).children('.address-data').children()
// iterate through each and make an associative array with the text
$.each(children, function (value) {
var className = $(this).attr('class');
box[className] = $(this).text();
});
console.log(box);
});
$("#next-step-button").on('click', function(){
window.location='index2.html';
});
});.address-box{
border: 1px solid black;
cursor: pointer;
}
.address-box-number{
width: 20px;
height: 20px;
background-color: black;
color: white;
text-align: center;
padding: 5px;
margin: 10px 0px 0px 10px;
}
.address-data {
margin-left: 15%;
}
.address {
font-size: 17px;
&__name{
p {
font-weight: 600;
}
}
&__location {
font-weight: 500;
}
}
.address-distance{
font-size: 15px;
color: darkgray;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="Square1 address-box" id="box-1">
<div class="address-box-number">1</div>
<div class="address-data">
<div class="address address__name">
<span id="box-1-title">some text</span>
</div>
<div class="address address__location">
<span id="box-1-title">more text</span>
</div>
<div class="address-distance">
<p>000 miles away (00 hour, 00min)</p>
</div>
</div>
</div>
<div class="Square2 address-box" id="box-2">
<div class="address-box-number">2</div>
<div class="address-data">
<div class="address address__name">
<p>CARL ROSNER MOTORCYCLES</p>
</div>
<div class="address address__location">
<p>249 London Road, Romford, Essex, RM7 9NB</p>
</div>
<div class="address-distance">
<p>000 miles away (00 hour, 00min)</p>
</div>
</div>
</div>
<div class="Square3 address-box" id="box-3">
<div class="address-box-number">3</div>
<div class="address-data">
<div class="address address__name">
<p>JACK LILLEY ROMFORD</p>
</div>
<div class="address address__location">
<p>59 - 61 Albert Embankment, Vauxhall, London UK, SE1 7TP</p>
</div>
<div class="address-distance">
<p>000 miles away (00 hour, 00min)</p>
</div>
</div>
</div>
<div class="Square4 address-box" id="box-4">
<div class="address-box-number">4</div>
<div class="address-data">
<div class="address address__name">
<p>JACK LILLEY ASHFORD</p>
</div>
<div class="address address__location">
<p>249 London Road, Romford, Essex, RM7 9NB</p>
</div>
<div class="address-distance">
<p>000 miles away (00 hour, 00min)</p>
</div>
</div>
</div>
//Next page box HTML
<div class="address-box">
<div class="address-data">
<div class="address address__name">
<p>METROPOLIS MOTORCYCLES</p>
</div>
<div class="address address__location">
<p>59 - 61 Albert Embankment, Vauxhall, London UK,</p>
<p id="box1pc" value="SE1 7TP">SE1 7TP</p>
</div>
<div class="address-distance">
<p>000 miles away (00 hour, 00min)</p>
</div>
</div>
</div>
最佳答案
如果您希望在客户端环境(浏览器)中执行所有逻辑，您必须使用某种存储来存储所选选项。您可以通过以下方式实现:cookies、localStorage、sessionStorage，甚至在浏览器 SQL 数据库中(仍未得到大力支持)。
当用户选择特定框时，只需在将他转移到另一个页面之前存储对它的某种引用 (ID)。基于下一页中的引用，读取存储的值并对其执行操作。
关于javascript - 使用点击数据填充另一页上的框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48808156/