个人中心
gpt4 book ai didi

javascript - 由选择框更新的 php session 变量显示/隐藏不同语言的 div

转载 作者：行者123 更新时间：2023-11-30 05:41:15 24 4
gpt4 key购买 nike

首先，对于问题的简单性表示歉意，但这超出了我的技能水平，我已经完成了研究，我不能再盯着它看了。

我正在构建一个需要提供 3 种不同语言(英语、西类牙语和葡萄牙语)的网站，这些语言是通过右侧栏上的选择输入来选择的。我有一个 js 函数显示/隐藏相关的 div onchange，但是当我离开页面时 session 变量消失了。我也不确定如何让保存的显示/隐藏 div 在我更改页面时保持状态。所有页面都使用调用 session_start() 的标题模板

选择框码:

<div id="languageSelect">
<?php
$_SESSION['language'] = $_POST['languageDropdown'];
?>
<form method="post" action="<?php echo $PHP_SELF;?>">
    <select name="languageDropdown" id="languageDropdown" class="languageDropdown" onchange="selectLanguage();submit();">
        <option name="English" value="English" <?php if (($_SESSION['language'] == '') || ($_SESSION['language'] == 'English')) echo 'selected="selected"'; ?>>English</option>
        <option name="Español" value="Español" <?php if ($_SESSION['language'] == 'Español') echo 'selected="selected"'; ?>>Español</option>
        <option name="Português" value="Português" <?php if ($_SESSION['language'] == 'Português') echo 'selected="selected"'; ?>>Português</option>
    </select>
    </form>
</div>

Javascript 代码片段(成功改变当前页面的语言)

    function selectLanguage() {
if (document.getElementById('languageDropdown').selectedIndex == 0){
    $('#nav-en').show();
    $('#content-en').show();
    $('#nav-es').hide();
    $('#content-es').hide();
    $('#nav-pt').hide();
    $('#content-pt').hide();
}

我试图解决我的问题的方法是让选择框在提交 session 变量时保持他们的选项()然后让javascript函数读取页面加载时仍然选择哪个选项并显示/隐藏相关div，但还没有这样的运气。

$(function(){

if (document.getElementById('languageDropdown').selectedIndex == 0){
    $('#nav-en').show();
    $('#content-en').show();
    $('#nav-es').hide();
    $('#content-es').hide();
    $('#nav-pt').hide();
    $('#content-pt').hide();
}
if (document.getElementById('languageDropdown').selectedIndex == 1){
    $('#nav-en').hide();
    $('#content-en').hide();
    $('#nav-es').show();
    $('#content-es').show();
    $('#nav-pt').hide();
    $('#content-pt').hide();
}
if (document.getElementById('languageDropdown').selectedIndex == 2){
    $('#nav-en').hide();
    $('#content-en').hide();
    $('#nav-es').hide();
    $('#content-es').hide();
    $('#nav-pt').show();
    $('#content-pt').show();
}
});

我是 php 的新手，但我已经完成了研究，因此将不胜感激。

最佳答案

您可以使用以下代码创建另一个脚本 update-language.php:

<?php 

session_start();
$_SESSION['language'] = $_GET['languageDropdown'];

?>

然后，在您的 javascript 中(使用看起来您正在部分使用的 jQuery)，您可以编写:

jQuery(function($){
    $("#languageDropdown").change(function(){
        $.get("update-language.php",{languageDropdown:$(this).val()});
    });
});

这不会像您尝试的那样重新加载页面，但它会加载新脚本，该脚本会更新 session 变量，以便在重新加载页面时识别新选择的语言。

$.get() jQuery 中的命令将通过 AJAX 加载脚本，因此您不需要刷新页面。

这是我测试过的完整代码:

index.php

<?php session_start(); 
if($_SESSION['language'] == '') $_SESSION['language'] = "English";
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Change Language</title>
    </head>
    <body>

            <div id="languageSelect">
                <p>Your current language is:
                    <select name="languageDropdown" id="languageDropdown" class="languageDropdown">
                <option name="English" value="English" <?php if ($_SESSION['language'] == 'English') echo 'selected="selected"'; ?>>English</option>
                <option name="Español" value="Español" <?php if ($_SESSION['language'] == 'Español') echo 'selected="selected"'; ?>>Español</option>
                <option name="Português" value="Português" <?php if ($_SESSION['language'] == 'Português') echo 'selected="selected"'; ?>>Português</option>
                  </select>
                </p>
            </div>

            <nav id="nav-en" <?php if ($_SESSION['language'] != 'English') echo 'style="display:none"'; ?>><a href="#link">English Navigation</a></nav>
            <nav id="nav-es" <?php if ($_SESSION['language'] != 'Español') echo 'style="display:none"'; ?>><a href="#link">Español Navigation</a></nav>
            <nav id="nav-pt" <?php if ($_SESSION['language'] != 'Português') echo 'style="display:none"'; ?>><a href="#link">Português Navigation</a></nav>

            <section id="content-en" <?php if ($_SESSION['language'] != 'English') echo 'style="display:none"'; ?>>
                <h1>English Content</h1>
            </section>
            <section id="content-es" <?php if ($_SESSION['language'] != 'Español') echo 'style="display:none"'; ?>>
                <h1>Español Content</h1>
            </section>
            <section id="content-pt" <?php if ($_SESSION['language'] != 'Português') echo 'style="display:none"'; ?>>
                <h1>Português Content</h1>
            </section>

            <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script type="text/javascript">
      jQuery(function($){

        $("#languageDropdown").change(function(){

            //update the language session
            $.get("update-language.php",{languageDropdown:$(this).val()});

            //change the current interface language
            $("#content-en, #content-es, #content-pt, #nav-en, #nav-es, #nav-pt").hide();
            if($(this).val() == "English")
                $("#content-en, #nav-en").show();
            else if($(this).val() == "Español")
                $("#content-es, #nav-es").show();
            else if($(this).val() == "Português")
                $("#content-pt, #nav-pt").show();

        });

      });
      </script>

    </body>
</html>

更新语言.php

<?php 

session_start();
$_SESSION['language'] = $_GET['languageDropdown'];

?>

有更简单的方法来构建像这样的小型语言系统，但这完全是另一个讨论。希望此解决方案适合您的需求和您已有的代码。

关于javascript - 由选择框更新的 php session 变量显示/隐藏不同语言的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20703400/

24 4 0
文章推荐： c++ - Unicode char 到 wstring
文章推荐： java - 读取 Swift Message Prowide (WIFE) 后关闭 fileInputStream
文章推荐： c++ - 如何在给定时间后确定物体在 2D 空间中的位置？
文章推荐： java - 运行时访问jar中的库资源
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com