如何在重新加载浏览器后保留 Javascript 上的文本更改？

Question

我对 Javascript 很陌生。我从头开始创建了我的第一个代码，我所做的是当屏幕宽度达到 900px 时，选项卡上较长的文字被较短的文字所取代。

这些是标签中的标题：

信用专家对比信用评分进入信用专家对比评分
我们如何帮助人们进入我们如何帮助

当我调整浏览器大小时它确实有效，但是，当我刷新它时它会恢复到更长的措辞。有没有办法在刷新后保留它？

此外，请记住 我不能使用 CSS 或媒体查询 ，因为 jQuery 选项卡无法在检测到时删除较长的措辞宽度小于 900 像素。

这是网页： http://planet.nu/dev/test/index.html

这是我的 Javascript 代码：

$(document).ready(function(){
function checkWidth() {
    if ($(window).width() < 900) {
        $('li.cvc').text('Credit Expert vs Score');
        $('li.hwh').text('How we help');
    } else {
        $('li.cvc').text('Credit Expert vs Credit Score');
        $('li.hwh').text('How we help people');
    }
}
$(window).resize(checkWidth);
});

Answer 1

您只需在首次加载页面时调用 checkWidth()，以便在调整页面大小之前应用逻辑。

$(document).ready(function(){
    function checkWidth() {
        if ($(window).width() < 900) {
            $('li.cvc').text('Credit Expert vs Score');
            $('li.hwh').text('How we help');
        } else {
            $('li.cvc').text('Credit Expert vs Credit Score');
            $('li.hwh').text('How we help people');
        }
    }
    $(window).resize(checkWidth);
    checkWidth();
});

Answer 2

运行在页面加载时检查一次宽度，因此：

$(window).resize(checkWidth);
checkWidth();

Answer 3

您可以使用 triggerHandler 在页面加载时调用您的函数。

$(window).resize(checkWidth).triggerHandler('resize');

Answer 4

只需调用 checkWidth();功能类似于

$(document).ready(function(){
function checkWidth() {
    if ($(window).width() < 900) {
        $('li.cvc').text('Credit Expert vs Score');
        $('li.hwh').text('How we help');
    } else {
        $('li.cvc').text('Credit Expert vs Credit Score');
        $('li.hwh').text('How we help people');
    }
}
$(window).resize(checkWidth);
checkWidth();
});

如何在重新加载浏览器后保留 Javascript 上的文本更改？

How to retain text change on Javascript after reloading browser?

html

javascript

jquery

window-resize