如何使用此localstorage示例插入此脚本?

时间:2013-02-08 05:36:27

标签: jquery html local-storage swap

我编写了一个脚本,告诉多个div通过这个网站http://www.martyregan.com/通过单击“网站语言”按钮从英语div转换到日语div。

它按照我喜欢的方式工作,虽然我的客户想知道DIV在转到另一页时是否可以留在日语DIV上。

该脚本当前告诉First Child类(两个相应的div)显示并隐藏任何其他共享该类。

它还告诉第一个子类是活动的,所以我想有一种方法可以实现某种缓存/内存脚本来处理它。

    $(function() {
$('#left-sidebar-inner .ddsmoothmenu-v, #right-sidebar-inner .ddsmoothmenu-v, #pb_sidebar .ddsmoothmenu-v, #main-content-inner .content, #main-content-inner .contact, #main-content-inner .right, #main-content-inner .program, #main-content-inner .worksnav, #main-content-inner .worksnav2, #main-content-inner .heading').hide();
$('#left-sidebar-inner .ddsmoothmenu-v:first, #right-sidebar-inner .ddsmoothmenu-v:first, #pb_sidebar .ddsmoothmenu-v:first, #main-content-inner .content:first, #main-content-inner .contact:first, #main-content-inner .right:first, #main-content-inner .program:first, #main-content-inner .worksnav:first, #main-content-inner .worksnav2:first, #main-content-inner .heading:first').show();
$('#language a:first').addClass('active');

$('#language a').click(function() {
if ($(this).hasClass('active') == true) {
    return false;
}
else {
    $('a.active').removeClass('active');
    $(this).addClass('active');

    $('#left-sidebar-inner .ddsmoothmenu-v, #right-sidebar-inner .ddsmoothmenu-v, #pb_sidebar .ddsmoothmenu-v, #main-content-inner .content, #main-content-inner .contact, #main-content-inner .right, #main-content-inner .program, #main-content-inner .worksnav, #main-content-inner .worksnav2, #main-content-inner .heading').fadeOut();
    var contentToLoad = $(this).attr('href');
    $(contentToLoad).fadeIn();

    return false;
}
});
});

以下是我给出的例子:

$('a.en').click(function(){
localStorage.setItem('language', 'en');
});

$('a.fr').click(function(){
localStorage.setItem('language', 'fr');
});

// to get the language value use getItem
localStorage.getItem('language');

1 个答案:

答案 0 :(得分:1)

您的问题可以快速解决, 所以不要再告诉你,任何自由职业者都可以解决这个问题 我希望我刚刚做到了;)

这是未经测试的,因为创建测试环境需要付出相当大的努力,

但是 应该工作,如果你将html id标签添加到语言选择器的链接,

<div id="language">
    <a id="en" href="#mainnaven, #contenten, #contacten, #works_righten, #works_programen,  #worksnaven,  #worksnav2en, #works_headen" class="">
        <img src="http://www.martyregan.com/files/1413/5826/9756/en.png">
    </a>
    <a id="jp" href="#mainnavjp, #contentjp, #contactjp, #works_rightjp, #works_programjp, #worksnavjp, #worksnav2jp, #works_headjp" class="active">
        <img src="http://www.martyregan.com/files/5213/5826/9759/jp.png">
    </a>
</div>

注意我添加到div中的id =“en”和id ='jp'。

如果不可能,我们将不得不再添加几行。

然后脚本将是:

jQuery(function($) {
  var language = localStorage.getItem('language');

  if(!language) {
    language = "en";
  }

  $('#left-sidebar-inner .ddsmoothmenu-v').fadeOut(function(){

    var link =  $('#'+language);
    var contentToLoad = link.attr('href');

    $('.active').removeClass('active');
    link.addClass('active');

    $(contentToLoad).fadeIn();
  });


  $('#left-sidebar-inner .ddsmoothmenu-v').show();
  $('#language a:first').addClass('active');

  $('#language a').live('click',function() {

    if ($(this).hasClass('active') == true) {
        return false;
    } else {
        $('a.active').removeClass('active');
        $(this).addClass('active');

        var language = 'jp';
        if($(this).attr('href').indexOf('mainnaven') > 0 ) {
          language = 'en'
        }

        localStorage.setItem('language', language);

        $('#left-sidebar-inner .ddsmoothmenu-v').fadeOut();
        var contentToLoad = $(this).attr('href');

        $(contentToLoad).fadeIn();

        return false;
    }
  });
});

玩得开心

雅舍