在 Wordpress 中缓存的 jquery 问题答案

【问题标题】：jquery issue with caching in Wordpress在 Wordpress 中缓存的 jquery 问题
【发布时间】：2016-07-04 23:49:11
【问题描述】：

根据用户点击的语言，我会显示相应的标志。当用户点击一个标志时，代码会将用户重定向到正确的 URL。

但是由于我已经为wordpress安装了WP_SUPER_CACHE插件，这个jquery代码的行为是随机的，有时它会生效并显示正确的标志，有时它不会正确刷新它。

我想这是由于缓存插件的原因，那么如何确定 cookie 会在 html 代码中被读取和更新？

HTML 代码：

<a id="lang-select" class="<?php echo isset($_COOKIE['lang']) 
? $_COOKIE['lang'] : 'en-us' ?>" data-toggle="modal" 
data-target="#lang-modal">&nbsp;</a>

CSS 代码：

#lang-select {
display: inline-block;
background-image: url(img/flags.png);
background-position: 0 0;
cursor: pointer;
height: 20px;
width: 30px;
}
#lang-select.us-en { background-position: 0 0; }
#lang-select.eu-en { background-position: -323px 0; }
#lang-select.eu-fr { background-position: -323px 0; }
#lang-select.eu-nl { background-position: -323px 0; }
#lang-select.ca-en { background-position: -204px 0; }
#lang-select.ch-en { background-position: -403px 0; }
#lang-select.ch-fr { background-position: -403px 0; }
#lang-select.no-en { background-position: -364px 0; }

JQUERY 代码：

jQuery(function($){
var baseurl = window.location.protocol + "//" + window.location.host + "/";
var lang = $.cookie('lang');
if ((location.href == baseurl) || (location.href == baseurl + 'eu-en/') || (location.href == baseurl + "eu-fr/") || (location.href == baseurl + "eu-nl/")) {
    if (lang) {
        // US English
        if ((lang == 'us-en' || lang == 'ca-en') && location.href != baseurl) {
            window.location.href = baseurl;
        }
        // Europe English 
        if ((lang == 'eu-en') && location.href != baseurl + 'eu-en/') {
            window.location.href = baseurl + "eu-en/";
        }
        // Europe French 
        if ((lang == 'eu-fr') && location.href != baseurl + 'eu-fr/') {
            window.location.href = baseurl + "eu-fr/";
        }
        // Europe Dutch 
        if ((lang == 'eu-nl') && location.href != baseurl + 'eu-nl/') {
            window.location.href = baseurl + "eu-nl/";
        }
    } else {
        $('#lang-modal').modal('show');
    }
} 

// MODAL - SET COOKIES //

// US English 
$('#us-en').live('click', function(e) {
    $.cookie("lang", "us-en", { path: '/', expires: 10000 });
    if (location.href == baseurl + 'eu-en/' || location.href == baseurl + "eu-fr/" || location.href == baseurl + "eu-nl/" ) {
        window.location.href = baseurl;
    }
});
// CA English
$('#ca-en').live('click', function(e) {
    $.cookie("lang", "ca-en", { path: '/', expires: 10000 });
    if (location.href == baseurl + 'eu-en' || location.href == baseurl + "eu-fr/" || location.href == baseurl + "eu-nl/" ) {
        window.location.href = baseurl;
    }
});

// Europe English 
$('#eu-en').live('click', function(e) {
    $.cookie("lang", "eu-en", { path: '/', expires: 10000 });
    if (location.href == baseurl || location.href == baseurl + "eu-fr/" || location.href == baseurl + "eu-nl/" ) {
        window.location.href = baseurl + "eu-en/";
    }
});

// Europe French 
$('#eu-fr').live('click', function(e) {
    $.cookie("lang", "eu-fr", { path: '/', expires: 10000 });
    if (location.href == baseurl || location.href == baseurl + "eu-en/" || location.href == baseurl + "eu-nl/" ) {
        window.location.href = baseurl + "eu-fr/";
    }
});

// Europe Dutch 
$('#eu-nl').live('click', function(e) {
    $.cookie("lang", "eu-nl", { path: '/', expires: 10000 });
    if (location.href == baseurl || location.href == baseurl + "eu-en/" || location.href == baseurl + "eu-fr/" ) {
        window.location.href = baseurl + "eu-nl/";
    }
});

});

【问题讨论】：

考虑使用on方法而不是live
这个代码最好使用一些 DRY
感谢您的建议，我已将 live() 更改为 on() 但问题仍然存在，
nop，因为美国和加拿大的链接是一样的，缓存过程取第一个缓存的页面，它不会更新标志的 css 类..
问题似乎出在你的 cookie 上去开发者工具看看当你改变你的语言时 cookie 是否正在更新

标签： jquery html css wordpress caching

【解决方案1】：

将您的链接更改为：

<a id="lang-select" class="en-us" data-toggle="modal" 
data-target="#lang-modal">&nbsp;</a>

在您的代码顶部以及每次更改 cookie 时添加此函数

function updateClass() {
var cookie = $.cookie("lang");
$('#lang-select').addClass(cookie);
}

【讨论】：