我想用 2 个按钮更改某个文本。这就是我现在所拥有的,这工作正常。(不介意语言,我是荷兰人(
<button onclick="document.getElementById('chgtext').innerHTML='NU WORDT HET ENGELS';">English</button>   <button onclick="document.getElementById('chgtext').innerHTML='Nu terug nederlands';">Nederlands</button>
<div id="chgtext">Heb je een vraag, een idee voor een post die je graag op mijn blog zou willen zien, of een andere reden waarom je mij wilt contacteren. Stuur me dan e-mail op (Of klik in de sidebar op het<font color="white">-</font><i class="fa fa-envelope"></i><font color="white">-</font>icoontje onder <em>social </em>)</div>
我想做的是放置图像并<字体样式,....进入变化的文本。但我不能。我已经尝试过使用>
<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. <img src='http://lorempixel.com/output/nightlife-q-c-50-50-6.jpg'> with image <span style='color :red;'>and color</span>';">English</button>   <button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another <span style='color :red;'>language</span>';">Nederlands</button>
<div id="chgtext">This is the default text. </div>
这就是我得到的--> http://oihanevalbuenaredondo.be/2017/02/03/test-2/
我需要的最终结果是这样的:
<button onclick="document.getElementById('chgtext').innerHTML='NU WORDT HET ENGELS';">English</button>   <button onclick="document.getElementById('chgtext').innerHTML='Heb je een vraag, een idee voor een post die je graag op mijn blog zou willen zien, of een andere reden waarom je mij wilt contacteren. Stuur me dan e-mail op info@rosalea.be (Of klik in de sidebar op het<font color="white">-</font><i class="fa fa-envelope"></i><font color="white">-</font>icoontje onder <em>social </em>)';">Nederlands</button>
<div id="chgtext">Heb je een vraag, een idee voor een post die je graag op mijn blog zou willen zien, of een andere reden waarom je mij wilt contacteren. Stuur me dan e-mail op info@rosalea.be (Of klik in de sidebar op het<font color="white">-</font><i class="fa fa-envelope"></i><font color="white">-</font>icoontje onder <em>social </em>)</div>
但这当然是不可能的,我怎么可能呢?(我没有 2 个用于 HTML 和 CSS 的文本插入框,在创建 wordpress 博客文章时,我只有 1 个框可以放入代码
Escaping
引号时遇到问题
例如,在 JavaScript 中设置值时,您可以使用单引号或双引号
someVar = "a value"; // this works fine
someVar = 'a value';// this works too
someVar = "a value that's an issue";// will work
someVar = 'a value that's an issue';// but this one breaks
要解决此问题,您可以使用像这样对其进行转义
someVar = 'a value that's an issue';// now it works
我添加了您的语言作为data-
属性,但如果您愿意,可以完成一个类,甚至可以阅读按钮文本本身。
我还将您的javascript分成一个文档就绪块,该块将使您的所有脚本逻辑与显示分开,并使以后的编辑更容易(最佳实践(。
你会发现非常有用的一个资源是jQuery API
有时所见即所得的编辑器会剥离脚本并重新格式化一些报价。 您可能需要更改WP中的某些设置,以容纳帖子中的脚本元素
<script>
$(document).ready(function() {
$('.btn').on('click', function(e) {
output = '';
switch ($(this).data('lang')) {
case 'English':
output = 'This is the default text.'+
'<img src='http://lorempixel.com/output/nightlife-q-c-50-50-6.jpg'> with image <span class='red'>and color</span><p>Do you have a question, an idea for a post you'd like to see on my blog, or any other reason you want to contact me. please send me email at info@rosalea.be (Or, in the sidebar on the - icon under social)</p>';
break;
case 'Nederlands':
output = 'Heb je een vraag, een idee voor een post die je graag op mijn blog zou willen zien, of een andere reden waarom je mij wilt contacteren. Stuur me dan e-mail op info@rosalea.be (Of klik in de sidebar op het<span class="white">-</span><i class="fa fa-envelope"></i><span class="white">-</span>icoontje onder <em>social </em>)';
break;
default:
output = 'This is the default text.';
}
$('#chgtext').html(output);
})
})
</script>
<div>
<button class="btn" data-lang="English">English</button>
<button class="btn" data-lang="Nederlands">Nederlands</button></div>
<div id="chgtext">This is the default text.</div>
/* add these lines to your css file if you want */
.white{
color:white;
}
.red{
color:red;
}
/*these should be in your framework already */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>