jquery cookies和div风格显示块/无

时间:2012-04-18 00:32:41

标签: jquery html jquery-cookie

我以前的脚本在调用时隐藏并显示某些div,但是我希望cookie能够记住要显示哪个div,这样用户就不必在每个页面上不断点击链接,但到目前为止我没有获得jquery.cookie插件与我的编码一起工作,任何帮助都会很棒。

单页工作: 旧代码jquery:

function language(chosenlanguage) {
 $('div[name|="lang"]').each(function(index) {
      if ($(this).attr("class") == chosenlanguage) {
           $(this).show(0);
      }
      else {
           $(this).hide(0);
      }
 });
}

旧代码html(仅使用href和div):

<div class="language">
<a href="javascript:language('english');">english</a>
<a href="javascript:language('spanish');">spanish</a>
<a href="javascript:language('german');">german</a>
</div>
<div name="lang" class="english" style="display:block;">content</div>
<div name="lang" class="spanish" style="display:none;">content</div>
<div name="lang" class="german" style="display:none;">content</div>

我使用jquery.cookie.js插件的新代码如图所示,但它绝对没有。

使用cookie脚本的jquery:

$(document).ready(function() { 
if($.cookie("language")) {
    $('div[name|="lang"]').each(function(index) {
      if ($(this).attr("class") == $.cookie("language")) {
           $(this).show(0);
      }
      else {
           $(this).hide(0);
      }
 });
}
$(".language a").click(function() { 
    $('div[name|="lang"]').each(function(index) {
      if ($(this).attr("class") == $(".language a").attr("name")) {
           $(this).show(0);
      }
      else {
           $(this).hide(0);
      }
 });
$.cookie("language",$('.language a').attr('name'), {expires: 365, path:      '/'});
    return false;
});
});

HTML(简写为):

<div class="language">
<a href="javascript:language('english');" name="english">english</a>
<a href="javascript:language('spanish');" name="spanish">spanish</a>
<a href="javascript:language('german');" name="german">german</a>
</div>
<div name="lang" class="english" style="display:block;">content</div>
<div name="lang" class="spanish" style="display:none;">content</div>
<div name="lang" class="german" style="display:none;">content</div>

所以我只是想知道我做错了什么?

1 个答案:

答案 0 :(得分:2)

$.cookie("language",$('.language a').attr('name'), {expires: 365, path:      '/'});
    return false;
});

始终将Cookie的值设置为english,因为它始终会返回name中第一个<a />的{​​{1}}

另外,您不应该以这种方式将类与字符串进行比较:.languages,您应该使用.attr('class') == lang,例如:hasClass

.hasClass(lang)

应该是这样的:

$(".language a").click(function() { 
    $('div[name|="lang"]').each(function(index) {
      if ($(this).attr("class") == $(".language a").attr("name")) {
           $(this).show(0);
      }
      else {
           $(this).hide(0);
      }
 });

注意我在循环遍历div之前将点击的项目保存在变量中,您需要这样做以获得对所单击项目的引用