时间戳

首页 > 解决方案 > 如何让一个html页面上的事件更改影响另一个使用jquery有条件的页面？

jquery - 如何让一个html页面上的事件更改影响另一个使用jquery有条件的页面？

问题描述

所以我有两个应该相互链接的 html 浏览器（index.html 和 results.html）。根据用户从 index.html 的下拉菜单中选择的答案，页面应指向 results.html - 这意味着页面的结果可能会因用户选择而异。我如何以及在哪里使用 jQuery 来显示这个？

有关更多项目详细信息 - 用户应从 index.html 上的下拉菜单中选择一个位置，然后将在另一个页面中显示该选定区域中的某些餐厅。所有可能的结果都在一个 results.html 中，其中的元素是隐藏的。下面是 jQuery 逻辑，但是如何确保我为 index.html 编写的代码将链接到 results.html？

jQuery：

    if (selectLocation == "Harlem") {
        $('body').removeClass().addClass('harlem'); 
    } else if (city == "Upper West Side") {
        $('body').removeClass().addClass('uws'); 
    } else {
        $('body').removeClass();
    }

编辑：将 html 浏览器更改为 html 页面（这里是新编码器！）

标签： jqueryhtml

解决方案

您可以使用localStorage在页面之间存储数据。

LocalStorage（又名网络存储）允许您将键值对存储在浏览器的缓存中。它存储在每个域的基础上，并且不能在不同域的页面之间共享数据。

这是一个简单的示例，应该向您展示它是如何工作的：

这就是为什么下面的代码片段不能在 StackOverflow 上运行 - 但它们可以在您的网站上运行

第一页

$('select').change(function(){
   let valu = this.value;
   let text = $(this).find('option:selected').text();
   localStorage.setItem('val', valu);
   localStorage.setItem('txt', text);
   window.location.href = 'page2.html'; //replace with your real page2 name
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>Page One</h1>
<select>
   <option value="">Choose:</option>
   <option value="bob">Bob Roberts</option>
   <option value="sue">Sue Mosher</option>
   <option value="ann">Ann Frank</option>
</select>

第二页

let val = localStorage.getItem('val');
let txt = localStorage.getItem('txt');
$('#val').val(val);
$('#txt').val(txt);

if (val=='ann'){
  $('body').prepend('<p style="color:darkcyan;">Ann comes first in the dictionary</p>')
}else if (val == 'bob'){
  $('body').append("<h3>Bob's my uncle</h3>");
}else{
  $('body').append('<div style="height:50px;text-align:center;background:wheat;font-size:3rem;">Sam I am</div>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>Page TWO</h1>
<input id="val" type="text" />
<input id="txt" type="text" />

参考：

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

localStorage 什么时候清空？

推荐阅读