Question

所以我有一个带有div的网页，覆盖整个页面，要求客户选择他们的首选货币。

当他们选择美国或英国时，页面会重新加载URL中的货币参数（/？currency = GBP），这会更改页面上显示的价格。

然而，无论我尝试什么，我都无法在页面重新加载时显示任何div。

所以这里是pop-over的代码：

<div id="floatingBox">
    <div>
        The two buttons go here.
        <a href="/?currency=GBP">UK</a>
        <a href="/?currency=USD">USA</a>
    </div>
</div>

这里是id floatingBox的样式：

#floatingBox {
    z-index: 39879;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

以下是我使用的JavaScript：

if (window.location.search.search('GBP')) {
    document.getElementById('floatingBox').display = 'none';
}

if (window.location.search.search('USD')){
    document.getElementById('floatingBox').display = 'none';
}

所以基本上一切都运行正常，除了在用户选择了一个选项时删除#floatingDiv。

如何在重新加载页面时以及有URL参数时不显示此div？使用JavaScript而不是jQuery。

我认为使用onclick并运行一个使用localStorage并为该div调用样式变量的函数可能会更好......

任何帮助表示赞赏：）

修改

我要去测试：

var hide = localStorage.getItem('currChoice') || 0;
if (hide == 1){
    document.getElementById('floatingBox').style.display = "none";
}

function gbpClick(){
    var currChoice = 1;
    localStorage.setItem('currChoice', currChoice);
    location.href='/?currency=GBP';
}

function usdClick(){
    var currChoice = 1;
    localStorage.setItem('currChoice', currChoice);
    location.href='/?currency=USD';
}

Answer 1

处理锚标记的点击事件，然后重新加载页面关闭div，然后重新加载。

Answer 2

我在主要问题上发布的编辑完全符合我的需要。

这是最终的代码： HTML：

<div id="floatingBox">
<div>
The two buttons go here.
<a href="/?currency=GBP">UK</a>
<a href="/?currency=USD">USA</a>
</div>
</div>

风格：

#floatingBox {
    z-index: 39879;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JavaScript的：

var hide = localStorage.getItem('currChoice') || 0;
if (hide == 1){
document.getElementById('floatingBox').style.display = "none";
localStorage.clear();
}

function gbpClick(){
var currChoice = 1;
localStorage.setItem('currChoice', currChoice);
location.href='/?currency=GBP';
}

function usdClick(){
var currChoice = 1;
localStorage.setItem('currChoice', currChoice);
location.href='/?currency=USD';
}

修改已添加localStorage.clear();以确保如果用户将其网址从.com/?currency=GBP或.com/?currency=USD更改回.com/，则系统会再次显示该网址。

单击按钮，使用参数重新加载窗口，然后删除按钮

2 个答案: