javascript - 基于 jquery cookie 的操作

Question

我有一个非常简单的 3 种语言网站，我使用 jQuery.cookies 将所选语言存储在 cookie 中。每种语言文本都存储在一个 div 中，并根据从 cookie 中检索到的语言显示所选语言(使用 jQuery 显示/隐藏)。

对于 3 按钮选择器，我使用 jQuery addClass 将单击的按钮显示为事件按钮。

我想通过从存储的 cookie 中检索信息，使当前语言按钮在刷新时处于事件状态。但是我找不到办法!请帮忙!谢谢!

我的 cookie 检索和显示/隐藏功能:

$(document).ready(function() {
var thechosenone = $.cookies.get( 'thechosenone' );
if($.cookies.get( 'thechosenone' ) == "newboxes1"|| $.cookies.get( 'thechosenone' ) == "newboxes2" || $.cookies.get( 'thechosenone' ) == "newboxes3") 
{ 
showonlyone(thechosenone);
}
          else {
var thechosenone = "newboxes1";
showonlyone(thechosenone);
}
});
function showonlyone(thechosenone) {
     $('div[name|="newboxes"]').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show();
          }
          else {
               $(this).hide();
          }
     });
$.cookies.set("thechosenone", thechosenone, { expires: 365 });    
}

我的事件按钮代码:

$(document).ready(function(){
   $('.button').click(function() {
    $('.button').removeClass('active');
    $(this).addClass('active');
});   
});

我的 3 个按钮:

<a id="myHeader1" href="javascript:showonlyone('newboxes1');"  href="#" class="button" title="LANGUAGE 1"> LANGUAGE 1<br /></a>
<a id="myHeader2" href="javascript:showonlyone('newboxes2');"  href="#" class="button" title="LANGUAGE 2"> LANGUAGE 2<br /></a>
<a id="myHeader3" href="javascript:showonlyone('newboxes3');"  href="#" class="button" title="LANGUAGE 3">LANGUAGE 3<br /></a>

我在 Div 中的文本:

<div name="newboxes" id="newboxes1">LANGUAGE 1 TEXT</div>
<div name="newboxes" id="newboxes2">LANGUAGE 2 TEXT</div>
<div name="newboxes" id="newboxes3">LANGUAGE 3 TEXT</div>

Answer 1

为什么不在 document.ready 上使用 addClass？

  $(document).ready(function() {
       var thechosenone = $.cookies.get( 'thechosenone' );
       if(!thechosenone ) thechosenone = "newboxes1";
       showonlyone(thechosenone);

       if(thechosenone=='newboxes1'){
         $("#myHeader1").addClass("active");
        } else  if(thechosenone=='newboxes2'){
         $("#myHeader2").addClass("active");
        } else if(thechosenone=='newboxes3'){
         $("#myHeader3").addClass("active");
        }
    });

我认为它一定会起作用。