Javascript =来回切换网页的语言？

Question

我正在尝试创建可以在中英文之间切换网页语言的Javascript。

当文档打开时，我将变量“chinese”设置为false。然后我有一个if语句，如果中文是假的，页面将翻译成中文（这部分在我点击时有效）并使中文=真。然后有另一个声明说如果中文是真的，页面将翻译成英文并使中文= false。单击它时，此部分不起作用。

$(document).ready(function () {

var chinese=false

if (chinese === false) {
        $('#tochinese').click(function () {
        $('#tochinese').html('<span>View in English</span>');
        $('#menu').html('菜单');
        $('#asynopsis').html('<a href="#synopsis" id="asynopsis">影片简介</a>');
        $('#afilmmakers').html('<a href="#filmmakers" id="afilmmakers">主创简介</a>');
        $('#aphotos').html('<a href="#photos" id="aphotos">幕后照片</a>');
        $('#acontact').html('<a href="#contact" id="acontact">联系咨询</a>');   
        $('#adonate').html('<a href="#donate" id="adonate">捐款合作</a>');
        $('#title span').html('<a href="/">杀死那逃羊</a>');
        $('#synopsis div').html(
            '<h1>影片简介</h1>\
            <p>刘晨的母亲杨慧娴和自己清贫的丈夫离婚，带着刘晨和拥有一个女儿胡茜，但因意外无法再生育儿子的企业老板胡科良再婚，开始了新生活。胡科良重男轻女，无比珍惜自己的继子，冷落了胡茜，让胡茜心生不满。另一方面，刘晨始终认定杨慧娴为了富贵生活狠心抛弃自己的生父，因此处处与杨慧娴和自己的新家庭为敌。</p>\
            <p>刘晨即将18岁成年。胡科良计划给刘晨一个盛大的派对，但是刘晨并不领情，并执意要和自己的生父一起庆祝。回到家中，胡科良恼羞成怒，迁怒于杨慧娴。刘晨听着胡科良对杨慧娴的斥责和打骂，幻想了自己冲进房间与胡科良殊死搏斗的情景。</p>\
            <p>胡科良威胁杨慧娴如果刘晨不愿意接受自己，那么，她以后便再也没有和他一同出入上流社会的机会。杨慧娴试图说服刘晨，但刘晨痛斥杨慧娴为了自己荣华富贵而背叛生父，利用自己的自私本性。</p>\
            <p>隔天，胡科良丢下杨慧娴独自外出。呆在家中的杨慧娴为了讨好胡科良，决定在家里大扫除。刘晨和胡茜都不愿意帮忙。胡茜在和宠物狗玩耍的时候，不小心破坏了胡科良的重要资料。晚上，胡科良回来之时，刘晨和杨慧娴意外发现胡科良竟有外遇。另一方面，胡科良发现资料被破坏后大发雷霆，胡茜嫁祸给杨慧娴并辱骂她。此时继祖母陈芬主动开口承担下了罪名。</p>\
            <p> 刘晨来到杨慧娴的房间质问胡茜为何嫁祸。两人发生争执，胡茜满不在乎地谩骂刘晨和杨慧娴。刘晨将胡茜扑倒在床上企图侮辱她。但是当一向高傲的胡茜没了气焰开始苦苦求饶的时候，刘晨突然失去了性趣。这时，刘晨听到胡科良朝胡茜房间走来，脑海中幻想了当着胡科良的面蹂躏胡茜的画面。回过神来，刘晨开门离去。</p>\
            <p>刘晨决定独自离家出走去找自己的生父，直到过完生日为止。当他拎着包悄悄下楼时，看见胡科良背对着自己看着报纸，而杨慧娴正在一旁冲泡茶叶。刘晨静静地看着杨慧娴取出一包粉末，倒入了茶杯中。杨慧娴在转身之时看到了刘晨，却镇定地把茶杯交给了胡科良。两人看着胡科良将茶一饮而尽。杨慧娴冷静地朝刘晨走来，刘晨微微颤抖着转过身，慢慢走上了楼梯。</p>\
            <p>房间里，刘晨独自坐在床上发呆。杨慧娴轻轻开门而入，从床底下拿出行李箱开始整理行李。两人一动一静，保持着沉默。整个家里一片安静：胡茜蜷缩在床上，桌上的音响缓缓播放着音乐；陈芬坐在房间的椅子上安静地睡着，手里的书本落在了地上；客厅里，胡科良的背靠在沙发上，整个人一动不动。</p>\
            <p>屋外，整座房子安静地伫立着，房间里的灯光在夜色中显得越来越小。</p>\
<p>-完-</p>');

        chinese=true
        });
}; 

if (chinese===true) {
        $('#tochinese').click(function () {
        $('#menu').html('Menu')
        $('#tochinese').html('<span>切换到英文</span>');
        $('#asynopsis').html('<a href="#synopsis" id="asynopsis">Synopsis</a>');
        $('#afilmmakers').html('<a href="#filmmakers" id="afilmmakers">Filmmakers</a>');
        $('#aphotos').html('<a href="#photos" id="aphotos">Photos</a>');
        $('#acontact').html('<a href="#contact" id="acontact">Contact</a>');    
        $('#adonate').html('<a href="#donate" id="adonate">Donate</a>');
        $('#title span').html('<a href="/">Raven Over the Edge</a>');
        $('#synopsis div').html(
            '<p>Liu’s mother Yang divorced her poor husband and married a wealthy entrepreneur Hu. Hu has a daughter Qian, but he is no longer able to have children after an accident. Qian is upset because Hu favors boys over girls, and Hu cares more about Liu than he does for Qian. On the other hand, Liu still thinks that Yang left his real father in pursue of a rich lifestyle, therefore he does everything he could to rebel against the new family.</p>\
          <p> Liu is about to turn 18, and Hu plans to throw a grand party for him, but Liu does not approve and insists on celebrating his birthday with his birth father. Back at home, Hu blames Yang for the fact that Liu doesn’t appreciate his gesture. Liu listened to Hu and Yang’s fight, and imagines himself raging into the room and fights Hu.</p>\
          <p> Hu threatens Yang and told her that if Liu still doesn’t accept him, she will no longer have the chance to attend social events with him. Yang tries to talk Liu into accepting Hu, but Liu accuses Yang for being greedy and betraying his birth father. </p>\
          <p> Next day, Hu goes out without Yang. Yang intends to make up with Hu and decides to clean the house. Neither Liu nor Qian wants to help. Qian is playing with her pet dog, but accidentally damaged one of Hu’s important documents. Later that night, Hu comes home; and to their surprise, Liu and Yang discover that Hu is having an affair. On the other hand, Hu is outrageous when he finds out that his documents are damaged. Qian pins the guilt on Yang and humiliates her. Now, Liu’s step-grandmother Fen took the blame for her. </p>\
        <p>Liu came to Qian’s room and asked her why did she blame the damaged documents on his mom. They fight, and Qian humiliates Liu and Yang carelessly. Liu throws himself onto Qian and pushes her onto her bed and tries to assault her. However, when Qian, who usually has a lot of pride, starts to beg, Liu loses his desire. At this time, Liu hears Hu and Yang’s steps walking towards the room, he imagines himself assaulting Qian in front of Hu. He walks out of the room when his thoughts came back.</p>\
        <p>Liu decides to leave the house to find his birth father until he his birthday passes. When he tries to sneak downstairs, he sees Hu is reading the newspaper with his back facing him while Yang is making tea. Liu quietly watches Yang taking a bag of power then pours it into the tea cup. Yang turns around and sees Liu, but calmly hands the cup of tea to Hu. The two of them watch Hu chuck the tea. Yang walks towards Liu emotionlessly, then Liu walks up the stairs with a shaking torso. </p>\
        <p>In his room, Liu is sitting on his bed and staring into the space. Yang slowly opens the door and enters, then she takes out a suitcase from underneath the bed. Liu sits still while Yang hustles through packing in silent. The entire house is quiet: Qian is in her bed, and the speaker in the corner plays music slowly; Fen is sleeping on a chair in her room, and her book falls on the floor from her hand; in the living room, Hu lies still against the couch without any movements.</p>\
        <p>Outside, the house stands tall in the tranquility, and the the light from the house slowly diminishes in the dark.</p> \
        <p>-End- </p>');
        chinese=false
    });
    };  
});

Answer 1

检查语言是否有效仅在文档准备就绪时运行一次 但是您希望此检查位于点击功能。

$(document).ready(function () {

  //initialize the variable once the document is ready
  var chinese=false;

  $('#tochinese').click(function () {
    if (chinese === false) {
      //translate the site into chinese
      $('#tochinese').html('<span>View in English</span>');
      $('#menu').html('菜单');
    }
    else {
      //translate the site into english
      $('#menu').html('Menu')
      $('#tochinese').html('<span>切换到英文</span>');
    }
  }
}

现在检查每次点击应该激活哪种语言，而不是文档就绪功能中的一次。

Answer 2

你可以通过完全不使用中文布尔值来做到这一点。 您可以在HTML中创建2个按钮，有点像这样。

<a id='toChinese'>CHINESE</a>
<a id='toEnglish' style='display:none;'>ENGLISH</a>

由于＆＃39; display：none;＆＃39;它一次只显示一个按钮。然后，当您想要使用toChinese.click更改为中文调用所有内容时，请使css显示none并显示英语按钮的块。这会更改按钮，您可以将其转换回英语：

$("#toChinese").click(function() {
   //change to chinese
   $("#toChinese").css("display", "none");
   $("#toEnglish").css("display", "block");
});

$("#toEnglish").click(function() {
   //change to English
   $("#toEnglish").css("display", "none");
   $("#toChinese").css("display", "block");
});