Question

我目前有一个类似于表单的页面，用户必须先点击一个框（包含数据），然后才能提交并转到下一页 - 但它不是表格帖子或其他任何内容（也许有人可以让我知道我这样做是否正确？）但是在下一页我希望它显示用户在顶部单击的框。目前我可以返回从框中点击的所有数据，我只需要在下一页显示点击框的方式

有没有人知道我会怎么做？我会附上一些图片，以使其更清晰。

我已将第一页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>

Answer 1

如果您希望在客户端环境（浏览器）中执行所有逻辑，则必须使用某种存储来存储所选的选项。您可以使用以下代码实现此目的：cookies，localStorage，sessionStorage，甚至可以在浏览器SQL数据库中实现此功能（仍然不受支持）。

当用户选择特定的框时，只需存储某种类型的引用（ID），然后再将其转移到另一个页面。根据下一页中的引用，读取存储的值并对其进行操作。

Answer 2

框对象包括：

address address__location : 59 - 61 Albert Embankment, Vauxhall, London UK, SE1 7TP",
address address__name: JACK LILLEY ROMFORD",
address-distance: 000 miles away (00 hour, 00min)"

现在您需要获取该信息（但将其转换为）：

"?address__location=59 - 61 Albert Embankment, Vauxhall, London UK, SE1 7TP
 &address__name=JACK LILLEY ROMFORD
 &address-distance=000 miles away (00 hour, 00min)";

将该字符串附加到重定向：

  $("#next-step-button").on('click', function(){
    window.location='index2.html'+box;
  });

在index2.html中，您需要使用JavaScript从网址获取信息。在sitepoint有一个很好的教程来完成这个提取https://www.sitepoint.com/get-url-parameters-with-javascript/

使用单击的数据填充另一页上的框

2 个答案: