我希望通过按钮更改文本。 无法放入图像或任何东西

Question

我想使用2个按钮更改某个文本。 这就是我现在所拥有的，效果很好。 （不要介意语言，我是荷兰人）

 <button onclick="document.getElementById('chgtext').innerHTML='NU WORDT HET ENGELS';">English</button> &#160; <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-qc-50-50-6.jpg\\'> with image <span style=\\'color :red;\\'>and color</span>';">English</button> &#160; <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> &#160; <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个框可用于插入代码

Answer 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- attribute，但是如果您愿意，可以将它作为一个类来完成，甚至可以读取按钮文本本身。

我还将您的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>