Question

$(document).ready(function() {

  var hrefs = {
    "en": ["includes/test1.html", "includes/test2.html"],
    "es": ["includes/test3.html", "includes/test4.html"]
  }
  $(function() {
    var cookie = Cookies.get('langCookie');
    if (cookie) {
      $("#div1").load(hrefs[cookie][0]);
      $("#div2").load(hrefs[cookie][1]);
    }
    $("[hreflang]").on("click", function() {
      var lang = $(this).attr("hreflang");
      Cookies.set('langCookie', lang);
      $("#div1").load(hrefs[lang][0]);
      $("#div2").load(hrefs[lang][1]);
    });
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js-cookie/src/js.cookie.js"></script>
<a href="#" hreflang="en" onclick="window.lang.change('en'); return false;">English</a> | <a href="#" hreflang="es" onclick="window.lang.change('es'); return false;">Spanish</a>

基于Cookie值加载内容时遇到问题。

我的div以这种方式设置：

<div id="prs"> </div>

我有一个伪语言切换器，如果基于cookie，应该将一个html文件加载到div中：

$(document).ready(function() {
var cookie = Cookies.get('langCookie');
if((cookie) === 'en')
{
$("#prs").empty();
$("#prs").load("includes/test.html");
}
else if((cookie) === 'th'){
$("#prs").empty();
$("#prs").load("includes/test2.html");
}
else if((cookie) === 'es'){
$("#prs").empty();
$("#prs").load("includes/test3.html");
}

但是，当我点击链接切换语言时，会设置cookie，但我必须重新加载页面才能看到新内容。正如您在上面的脚本中看到的，我尝试在加载内容之前在div上启动“empty（）”。这当然不起作用。我已经读过这个问题可能与$（document）.ready（fucntion）

有关

如果将cookie设置为新语言，并使用正确加载的html文件更新div，我该如何调用它以便div重新加载内容？

编辑添加：

用于语言切换的HTML（基于链接）：

<div id="langChanger"><a href="#" onclick="window.lang.change('en'); return false;">Switch to English</a> | <a href="#" onclick="window.lang.change('th'); return false;">Switch to Thai</a> | <a href="#" onclick="window.lang.change('es'); return false;">Switch to Spanish</a></div>

更新：每个请求下面包含的代码段。使用js-cookie.js创建cookie。

Answer 1

这样会更好。
请注意不显眼的事件处理和实际变量的使用，而不是每次都进行测试

var hrefs = {
  "en": "includes/test.html",
  "th": "includes/test2.html",
  "es": "includes/test3.html"
}
$(function() {
  var cookie = Cookies.get('langCookie');
  if (cookie) {
    $("#prs").load(hrefs[cookie]);
  }
  $("[hreflang]").on("click", function() {
    var lang = $(this).attr("hreflang");
    Cookies.set('langCookie', lang);
    $("#prs").load(hrefs[lang]);
  });
})

<div id="langChanger">
  <a href="#" hreflang="en">Switch to English</a> |
  <a href="#" hreflang="th">Switch to Thai</a> |
  <a href="#" hreflang="es">Switch to Spanish</a>
</div>

检查Cookie; load（）如果cookie匹配，需要重新加载才能看到新内容

1 个答案: