试图让我的头围绕这个需要运行相同js代码的多个html选择

问题描述 投票:0回答:1

我已经尝试了几个小时才能使其正常工作,但我只是错过了一些简单的东西(我不是程序员)。

我从各个网站(包括这个网站)中挑选并混合了这段代码:

<body onload="runme(sessionStorage.getItem('lang'))">

<script type="text/javascript" language="javascript">
function runme(lang) {
if (lang == "en") {
$('[lang="he"]').hide(); $('[lang="en"]').show(); } else {
    $('[lang="en"]').hide(); $('[lang="he"]').show(); };
$('#lang-switch, #en-lang-switch').change(function () {
    var lang = $(this).val();
    switch (lang) {
        case 'en':
            $('[lang="he"]').hide();
            $('[lang="en"]').show();
            sessionStorage.setItem("lang","en");
        break;
        case 'he':
            $('[lang="en"]').hide();
            $('[lang="he"]').show();
            sessionStorage.setItem("lang","he");
        break;
        default:
            $('[lang="en"]').hide();
            $('[lang="he"]').show();
            sessionStorage.setItem("lang","he");
        }
});
};
</script>

然后我有一个

<section lang="he">
SOME HEBREW TEXT
<select id="lang-switch">
          <script type="text/javascript" language="javascript">
            if(sessionStorage.getItem('lang')=="he") { 
                $('#lang-switch').html('<option value="he"  selected>עברית</option><option value="en">English</option>');
            } else {
                $('#lang-switch').html('<option value="en"  selected>English</option><option value="he">עברית</option>'); 
                }
        </script>
    </select>
</section>

然后我还有另一个英文部分:

<section lang="en">
SOME TEXT IN ENGLISH
<select id="en-lang-switch" lang="en">
            <script type="text/javascript" language="javascript">
                if(sessionStorage.getItem('lang')=="en") { 
                    $('#en-lang-switch').html('<option value="en"  selected>English</option><option value="he">עברית</option>'); 
                } else {
                    $('#en-lang-switch').html('<option value="he"  selected>עברית</option><option value="en">English</option>');
                    }
            </script>
        </select>
</section>

在 style.css 中我有

[lang="en"] {
  display: none;
}

[lang="he"] {
  display: none;
}

我想要完成的是选择将始终将当前语言显示为第一个并在下拉选项中选择。

我认为 $(this).val() 获取两个值,一个来自 lang-switch,一个来自 en-lang-switch,当我按下选择菜单中的一个选项时,它们总是不同的,并且总是选择第一个。

我不知道如何克服这个问题。

您可以在我的网站上查看完整代码https://siace.co.il

一个注释:使用了 sessionStorage,因此当我转到网站上的不同页面时,我会保持相同的语言。

javascript html css lang
1个回答
0
投票

当 sessionStorage.getItem('lang') 未定义时,应放入异常处理。 喜欢

<section lang="he">
    SOME HEBREW TEXT
    <select id="lang-switch">
        <script type="text/javascript" language="javascript">
            if(sessionStorage.getItem('lang')=="he" || sessionStorage.getItem('lang')== undefined) { 
                $('#lang-switch').html('<option value="he"  selected>עברית</option><option value="en">English</option>');
            } else {
                $('#lang-switch').html('<option value="en"  selected>English</option><option value="he">עברית</option>'); 
            }
        </script>
    </select>
</section>
© www.soinside.com 2019 - 2024. All rights reserved.