如何使用 jQuery 重新加载页面后保存 CSS 值?



我的网站上有一个简单的语言下拉列表,可以更改iframe中的语言。 问题是,每当我在 iframe 中滑动到下一页时,语言都会恢复为其默认值,即使下拉列表仍在另一种语言上。

.HTML:

<input type="checkbox" id="checkbox_English" checked style="display: none">
<input type="checkbox" id="checkbox_German" style="display: none">
<select id="language_Dropdown">
<option value="english">English</option>
<option value="german">Deutsch</option>
</select>

主页上的 CSS:

#language_Dropdown{
display: block;
margin-left: auto;
margin-right: auto;
border-top: 1px black solid;
border-right: 1px black solid;
border-bottom: 2.5px black solid;
border-left: 1px black solid;
border-radius: 7.5%;
font-family: PixelGosub, Roboto, sans-serif;
color: white;
background-color: black;}

iFrame 中的 CSS:

.english{
display: unset;}
.german{
display: none;}

j查询:

$(document).ready(function() {
$( "#language_Dropdown" ).change(function() {
var option = $("#language_Dropdown").val();
if (option == "english") {
$( "#checkbox_English" ).prop( "checked", true );
$( "#checkbox_German" ).prop( "checked", false );
var iFrame = $("#iFrame_Content").contents();
iFrame.find(".english").css("display", "unset");
iFrame.find(".german").css("display", "none");
}
else if (option == "german"){
$( "#checkbox_English" ).prop( "checked", false );
$( "#checkbox_German" ).prop( "checked", true );
var iFrame = $("#iFrame_Content").contents();
iFrame.find(".english").css("display", "none");
iFrame.find(".german").css("display", "unset");
}
});
});

我已经读过我必须使用 cookie 来做到这一点,但我对 jQuery 很陌生,我查找的大多数解决方案都非常先进...... 有没有更简单的方法可以在我的代码中添加一些东西以使其工作,或者我是否完全错误?

感谢您的所有回复,

我查找了04FS提到的加载方法,并找到了适合我的东西。

这是添加的代码:

$(document).ready(function() {
$("#iFrame_Content").on( "load", function() {
var option = $("#language_Dropdown").val();
if (option == "english") {
var iFrame = $("#iFrame_Content").contents();
iFrame.find(".english").css("display", "unset");
iFrame.find(".german").css("display", "none");
}
else if (option == "german") {
var iFrame = $("#iFrame_Content").contents();
iFrame.find(".english").css("display", "none");
iFrame.find(".german").css("display", "unset");
}
});
});

最新更新