基于 jquery cookie 的操作答案

【问题标题】：action based on jquery cookies基于 jquery cookie 的操作
【发布时间】：2014-08-27 04:39:26
【问题描述】：

我有一个非常简单的 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>

【问题讨论】：

标签： javascript jquery html css cookies

【解决方案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");
        }
    });

我认为它肯定会起作用。

【讨论】：

【解决方案2】：

我的错误是我使用了：

 $("myHeader1").addClass("active");

而不是：

 $("#myHeader1").addClass("active");

我将您的代码放在两个循环中，它可以正常工作，非常感谢！：

<script type="text/javascript">


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

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

        }
          else {
var thechosenone = "newboxes1";
showonlyone(thechosenone);

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

}
});
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 });    
}
</script>

【讨论】：