检查 Cookie； load() 如果 cookie 匹配，需要重新加载才能看到新内容

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 设置为新语言后重新加载 div 的内容，并使用正确加载的 html 文件更新 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>

---

更新：在每个请求下方包含 sn-p。使用 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>