0
ボタンをクリックしてWebコンテンツを翻訳する方法を実装しましたが、html data- *属性を使用してページをリロードする必要はありません。この場合、カスタムデータ属性data-enは、英語に翻訳されたdivの内容を格納します。divtmlテキストコンテンツをhtml5データ属性で変更できません
私の小さなコードがコンテナのテキストコンテンツを変えないことが何らかの理由でわかりません。
<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{
\t position:absolute;
\t bottom:22px;
\t right:15px;
\t cursor:pointer;
\t z-index:10001;
\t -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{
\t list-style:none;
\t bottom:8px;
\t position:absolute;
\t font-family: 'Covered By Your Grace', cursive;
\t font-weight:300;
\t width:200px;
\t 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>
\t <li data-en="Language">Idioma: <span id="languagetoggler" onclick="toggleLanguage()" >español</span></li>
\t <li data-en="Slides">Diapositivas: <span class="resta">< </span><span class="segundos">5s</span><span class="suma"> ></span></li>
</ul>
</div>
あなたのコードは 'erroneous' '（エン）VAR EN = e.data'で '''行方不明出力なし; ' –