Question

我在我的网站上安装了一个脚本，允许低对比度设置和高对比度设置，因为我的网站将被视障人士使用。该脚本完美无缺。唯一的问题是访问者访问网站的多个页面时。

首次访问该网站时，默认情况下低对比度设置有效，仅显示高对比度设置的链接。如果您随后访问该网站的其他页面，默认情况下低对比度设置有效，只显示高对比度链接（这是完美的，应该是这样）。该网站使用cookie来完成此任务。

这是问题所在。如果单击高对比度链接以高对比度设置查看页面然后转到另一页，则另一页出现在高对比度设置中（应该如此），而不是出现低对比度设置的链接（我希望发生这种情况），会出现一个指向高对比度设置的链接（由于页面已经处于高对比度设置，因此没有意义）。

我的网站尚未完成，但我在http://www.14kt.eu/发布了几页，因此您可以看到我在说什么。这个网站的一些成员非常友好地帮助我使用代码/脚本，并且事情有点完美，但之后就停止了工作。我怀疑我在其他html中改变了一些导致这种情况的东西。相当困惑于这个问题。

如果有人可以告诉我如何解决这个问题，我将非常感激。

谢谢你的时间，克里斯

Answer 1

只是在四处寻找，看起来好像你有javascript同时在几个不同的方向上运行。 window.onload分别与两个不同的功能联系在一起。第一个调用FixRows，它应该适当地显示“低对比度”/“高对比度”（来自您设置的cookie）。我认为第二个window.onload会覆盖第一个。{/ p>

我认为这不会直接影响您的代码，但您在styles_1.js的styleswitcher.js和setCookie()中有createCookie() - 他们正在做同样的事情。我要说你至少应该在一个或另一个库中整合cookie功能，以减少混淆。

希望我一直很有帮助。

Answer 2

看起来您只需要根据Cookie有条件地隐藏样式表按钮。

您可以使用以下代码执行此操作（已更新）：

function setStylesheetFromCookie() {
    var stylesheet = readCookie('mysheet') || 'none';
    if( stylesheet == 'highcontrast' ) {
        console.log('high');
        document.getElementById('Lc').style.display = 'block';
        document.getElementById('Hc').style.display = 'none';
    } else {
        console.log('low');
        document.getElementById('Hc').style.display = 'block';
        document.getElementById('Lc').style.display = 'none';
    }
}

在script_1.js中的某处添加该代码。

为了使其工作，它需要在窗口加载上运行。这给我们带来了问题二。脚本1中有两个不同的 window.onload 分配。你需要巩固这两者。删除行

window.onload = FixRows;

并修改第二个window.onload = function（），如下所示：

window.onload = function() {
    var el = document.getElementById('mydiv');
    var size = readCookie('fontsize');
    if(size) {
        doChangeSize(el, size);
    }
    var original = readCookie('originalsize');
    if(original) {
        el.originalSize = original;
    }

    FixRows(); //You are adding this line
    setStylesheetFromCookie(); //and adding this line to the end of the function
}

注意最后两个新的函数调用。这应该可以解决你的问题。

干杯！

基于所选样式表在页面之间导航时切换链接文本

2 个答案: