无法更改具有 html5 数据属性的 div 文本内容
failing to change a divs text content with html5 data attributes
所以我实现了一种通过单击按钮来翻译我的 Web 内容的方法,而无需尝试使用 html data-* 属性重新加载页面,在这种情况下,我使用自定义数据属性 data-en 来存储div 翻译成英文的内容。
出于某种原因,我看不到我的小代码没有挂起容器的文本内容。
<script>
$('.settingswheel').click(function() {
var e = $('.settingsin');
var en = e.dataset.en;
alert(en);
e.text(en);
});
</script>
.postit {
position:absolute;
overflow:hidden;
left:1070px;
top:-155px;
padding-left:10px;
line-height: 1;
width: 275px;
margin: 0px;
min-height:250px;
max-height:250px;
padding-top:35px;
border:1px solid #E8E8E8;
border-top:60px solid #fdfd86;
font-family:'Reenie Beanie';
font-size:22px;
border-bottom-right-radius: 60px 5px;
display:inline-block;
background: #ffff88; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */
background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.postit:after {
content: "";
position:absolute;
z-index:-1;
right:-0px; bottom:20px;
width:200px;
height: 25px;
background: rgba(0, 0, 0, 0.2);
box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
transform: matrix(-1, -0.1, 0, 1, 0, 0);
}
.settingswheel{
position:absolute;
bottom:22px;
right:15px;
cursor:pointer;
z-index:10001;
-moz-transition: transform 2.5s;
-webkit-transition: transform 2.5s;
transition: transform 2.5s;
}
.settingswheel:hover{
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
.settingsin{z-index:2; font-size:60px; font-family: 'Covered By Your Grace', cursive; display:flex; justify-content:center; align-items:center; padding:15px; background-color:rgb(255, 255, 136); position:absolute; bottom:5px; left:5px; transition: all 1.5s ease;}
.settingsout{z-index:2; font-size:60px; font-family: 'Covered By Your Grace', cursive; display:flex; justify-content:center; align-items:center; padding:15px; background-color:rgb(255, 255, 136); position:absolute; bottom:5px; left:-190px; transition: all 1.5s ease;}
.menu{
list-style:none;
bottom:8px;
position:absolute;
font-family: 'Covered By Your Grace', cursive;
font-weight:300;
width:200px;
z-index:1;
}
.menu ul li{font-size:22px; margin-top:8px;}
.suma{cursor:pointer;}
.resta{cursor:pointer;}
#languagetoggler{cursor:pointer;}
#fullscreentoggler{cursor:pointer;}
.flag{cursor:pointer;}
.amsheart{cursor:pointer;}
.amsterdam span{font-size:30px; font-weight:300;}
<div class="postit">
<img class="settingswheel" src="images/settings.png">
<span class="settingsin" data-en="Settings">Ajustes</span>
<ul class="menu">
<li data-en="Full screen">Pantalla completa: <span id="fullscreentoggler" value="F" onclick="toggleFullScreen()" data-en="yes">si</span></li>
<li data-en="Language">Idioma: <span id="languagetoggler" onclick="toggleLanguage()" >español</span></li>
<li data-en="Slides">Diapositivas: <span class="resta">< </span><span class="segundos">5s</span><span class="suma"> ></span></li>
</ul>
</div>
e
是一个 jQuery 对象。 jQuery 对象没有 dataset
属性
使用
var en = e[0].dataset.en;
或jQuerydata()
方法
var en = e.data('en);
$('.settingswheel').click(function() {
var e = $('.settingsin');
var en = e[0].dataset.en;
// or
//var en = e.data('en);
alert(en);
e.text(en);
});
.postit {
position: absolute;
overflow: hidden;
left: 1070px;
top: -155px;
padding-left: 10px;
line-height: 1;
width: 275px;
margin: 0px;
min-height: 250px;
max-height: 250px;
padding-top: 35px;
border: 1px solid #E8E8E8;
border-top: 60px solid #fdfd86;
font-family: 'Reenie Beanie';
font-size: 22px;
border-bottom-right-radius: 60px 5px;
display: inline-block;
background: #ffff88;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(81%, #ffff88), color-stop(82%, #ffff88), color-stop(82%, #ffff88), color-stop(100%, #ffffc6));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
/* IE10+ */
background: linear-gradient(135deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
.postit:after {
content: "";
position: absolute;
z-index: -1;
right: -0px;
bottom: 20px;
width: 200px;
height: 25px;
background: rgba(0, 0, 0, 0.2);
box-shadow: 2px 15px 5px rgba(0, 0, 0, 0.40);
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
transform: matrix(-1, -0.1, 0, 1, 0, 0);
}
.settingswheel {
position: absolute;
bottom: 22px;
right: 15px;
cursor: pointer;
z-index: 10001;
-moz-transition: transform 2.5s;
-webkit-transition: transform 2.5s;
transition: transform 2.5s;
}
.settingswheel:hover {
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
.settingsin {
z-index: 2;
font-size: 60px;
font-family: 'Covered By Your Grace', cursive;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
background-color: rgb(255, 255, 136);
position: absolute;
bottom: 5px;
left: 5px;
transition: all 1.5s ease;
}
.settingsout {
z-index: 2;
font-size: 60px;
font-family: 'Covered By Your Grace', cursive;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
background-color: rgb(255, 255, 136);
position: absolute;
bottom: 5px;
left: -190px;
transition: all 1.5s ease;
}
.menu {
list-style: none;
bottom: 8px;
position: absolute;
font-family: 'Covered By Your Grace', cursive;
font-weight: 300;
width: 200px;
z-index: 1;
}
.menu ul li {
font-size: 22px;
margin-top: 8px;
}
.suma {
cursor: pointer;
}
.resta {
cursor: pointer;
}
#languagetoggler {
cursor: pointer;
}
#fullscreentoggler {
cursor: pointer;
}
.flag {
cursor: pointer;
}
.amsheart {
cursor: pointer;
}
.amsterdam span {
font-size: 30px;
font-weight: 300;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="postit">
<i class="fa fa-bars settingswheel"></i>
<span class="settingsin" data-en="Settings">Ajustes</span>
<ul class="menu">
<li data-en="Full screen">Pantalla completa: <span id="fullscreentoggler" value="F" onclick="toggleFullScreen()" data-en="yes">si</span></li>
<li data-en="Language">Idioma: <span id="languagetoggler" onclick="toggleLanguage()">español</span></li>
<li data-en="Slides">Diapositivas: <span class="resta">> </span><span class="segundos">5s</span><span class="suma"> ></span></li>
</ul>
</div>
e是一个jquery对象,可以通过data函数访问数据属性。
var en = e.data('en');
打印"Settings"
所以我实现了一种通过单击按钮来翻译我的 Web 内容的方法,而无需尝试使用 html data-* 属性重新加载页面,在这种情况下,我使用自定义数据属性 data-en 来存储div 翻译成英文的内容。
出于某种原因,我看不到我的小代码没有挂起容器的文本内容。
<script>
$('.settingswheel').click(function() {
var e = $('.settingsin');
var en = e.dataset.en;
alert(en);
e.text(en);
});
</script>
.postit {
position:absolute;
overflow:hidden;
left:1070px;
top:-155px;
padding-left:10px;
line-height: 1;
width: 275px;
margin: 0px;
min-height:250px;
max-height:250px;
padding-top:35px;
border:1px solid #E8E8E8;
border-top:60px solid #fdfd86;
font-family:'Reenie Beanie';
font-size:22px;
border-bottom-right-radius: 60px 5px;
display:inline-block;
background: #ffff88; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */
background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.postit:after {
content: "";
position:absolute;
z-index:-1;
right:-0px; bottom:20px;
width:200px;
height: 25px;
background: rgba(0, 0, 0, 0.2);
box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
transform: matrix(-1, -0.1, 0, 1, 0, 0);
}
.settingswheel{
position:absolute;
bottom:22px;
right:15px;
cursor:pointer;
z-index:10001;
-moz-transition: transform 2.5s;
-webkit-transition: transform 2.5s;
transition: transform 2.5s;
}
.settingswheel:hover{
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
.settingsin{z-index:2; font-size:60px; font-family: 'Covered By Your Grace', cursive; display:flex; justify-content:center; align-items:center; padding:15px; background-color:rgb(255, 255, 136); position:absolute; bottom:5px; left:5px; transition: all 1.5s ease;}
.settingsout{z-index:2; font-size:60px; font-family: 'Covered By Your Grace', cursive; display:flex; justify-content:center; align-items:center; padding:15px; background-color:rgb(255, 255, 136); position:absolute; bottom:5px; left:-190px; transition: all 1.5s ease;}
.menu{
list-style:none;
bottom:8px;
position:absolute;
font-family: 'Covered By Your Grace', cursive;
font-weight:300;
width:200px;
z-index:1;
}
.menu ul li{font-size:22px; margin-top:8px;}
.suma{cursor:pointer;}
.resta{cursor:pointer;}
#languagetoggler{cursor:pointer;}
#fullscreentoggler{cursor:pointer;}
.flag{cursor:pointer;}
.amsheart{cursor:pointer;}
.amsterdam span{font-size:30px; font-weight:300;}
<div class="postit">
<img class="settingswheel" src="images/settings.png">
<span class="settingsin" data-en="Settings">Ajustes</span>
<ul class="menu">
<li data-en="Full screen">Pantalla completa: <span id="fullscreentoggler" value="F" onclick="toggleFullScreen()" data-en="yes">si</span></li>
<li data-en="Language">Idioma: <span id="languagetoggler" onclick="toggleLanguage()" >español</span></li>
<li data-en="Slides">Diapositivas: <span class="resta">< </span><span class="segundos">5s</span><span class="suma"> ></span></li>
</ul>
</div>
e
是一个 jQuery 对象。 jQuery 对象没有 dataset
属性
使用
var en = e[0].dataset.en;
或jQuerydata()
方法
var en = e.data('en);
$('.settingswheel').click(function() {
var e = $('.settingsin');
var en = e[0].dataset.en;
// or
//var en = e.data('en);
alert(en);
e.text(en);
});
.postit {
position: absolute;
overflow: hidden;
left: 1070px;
top: -155px;
padding-left: 10px;
line-height: 1;
width: 275px;
margin: 0px;
min-height: 250px;
max-height: 250px;
padding-top: 35px;
border: 1px solid #E8E8E8;
border-top: 60px solid #fdfd86;
font-family: 'Reenie Beanie';
font-size: 22px;
border-bottom-right-radius: 60px 5px;
display: inline-block;
background: #ffff88;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(81%, #ffff88), color-stop(82%, #ffff88), color-stop(82%, #ffff88), color-stop(100%, #ffffc6));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
/* IE10+ */
background: linear-gradient(135deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
.postit:after {
content: "";
position: absolute;
z-index: -1;
right: -0px;
bottom: 20px;
width: 200px;
height: 25px;
background: rgba(0, 0, 0, 0.2);
box-shadow: 2px 15px 5px rgba(0, 0, 0, 0.40);
-moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
-ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
transform: matrix(-1, -0.1, 0, 1, 0, 0);
}
.settingswheel {
position: absolute;
bottom: 22px;
right: 15px;
cursor: pointer;
z-index: 10001;
-moz-transition: transform 2.5s;
-webkit-transition: transform 2.5s;
transition: transform 2.5s;
}
.settingswheel:hover {
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
.settingsin {
z-index: 2;
font-size: 60px;
font-family: 'Covered By Your Grace', cursive;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
background-color: rgb(255, 255, 136);
position: absolute;
bottom: 5px;
left: 5px;
transition: all 1.5s ease;
}
.settingsout {
z-index: 2;
font-size: 60px;
font-family: 'Covered By Your Grace', cursive;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
background-color: rgb(255, 255, 136);
position: absolute;
bottom: 5px;
left: -190px;
transition: all 1.5s ease;
}
.menu {
list-style: none;
bottom: 8px;
position: absolute;
font-family: 'Covered By Your Grace', cursive;
font-weight: 300;
width: 200px;
z-index: 1;
}
.menu ul li {
font-size: 22px;
margin-top: 8px;
}
.suma {
cursor: pointer;
}
.resta {
cursor: pointer;
}
#languagetoggler {
cursor: pointer;
}
#fullscreentoggler {
cursor: pointer;
}
.flag {
cursor: pointer;
}
.amsheart {
cursor: pointer;
}
.amsterdam span {
font-size: 30px;
font-weight: 300;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="postit">
<i class="fa fa-bars settingswheel"></i>
<span class="settingsin" data-en="Settings">Ajustes</span>
<ul class="menu">
<li data-en="Full screen">Pantalla completa: <span id="fullscreentoggler" value="F" onclick="toggleFullScreen()" data-en="yes">si</span></li>
<li data-en="Language">Idioma: <span id="languagetoggler" onclick="toggleLanguage()">español</span></li>
<li data-en="Slides">Diapositivas: <span class="resta">> </span><span class="segundos">5s</span><span class="suma"> ></span></li>
</ul>
</div>
e是一个jquery对象,可以通过data函数访问数据属性。
var en = e.data('en');
打印"Settings"