Question

我正在使用Wordpress Avada主题，并且正在尝试使用jQuery翻译社交媒体隐私标签/内容。到目前为止，它工作正常，但一件事却没有。

这是HTML：

function translate() {
  jQuery(".fusion-privacy-label").text(function() {
    return jQuery(this).html().replace("For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our ", "Here is some example translation text. For more Details, please visit");
  });
}
setTimeout(translate, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fusion-privacy-label">
  For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our
  <a class="privacy-policy-link" href="https://example.com/privacy/">Privacy</a>.
</div>

到目前为止，该方法仍然有效，但它也会删除<a class="privacy-policy-link" href="https://example.com/privacy/">Privacy</a> HTML链接。我不想翻译此HTML链接。如果我尝试在翻译中添加<a class="privacy-policy-link" href="https://example.com/privacy/">Privacy</a>，它将显示为文本而不是HTML Link元素。

我想要的只是第一个文本部分的翻译，而不是a-tag元素或a-tag中的文本。

我错了什么？

Answer 1

尝试以下。使用jQuery.html代替jQuery.text

function translate(){
  jQuery(".fusion-privacy-label").html(function () {
    return jQuery(this).html().replace("For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our ", "Here is some example translation text. For more Details, please visit"); 
});
}
setTimeout(translate, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fusion-privacy-label">
For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our 
<a class="privacy-policy-link" href="https://example.com/privacy/">Privacy</a>.
</div>

Answer 2

我将使用.html而不是.text，因为div中包含html：

function translate() {
  jQuery(".fusion-privacy-label").html(function(index, oldHtml) { // as you use the function, just use the arguments of the function instead of $(this).html()
    return oldHtml.replace("For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our", "Here is some example translation text. For more Details, please visit"); // watch the spaces here - there is no space after our in your actual html
  });
}
setTimeout(translate, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fusion-privacy-label">
  For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our
  <a class="privacy-policy-link" href="https://example.com/privacy/">Privacy</a>.
</div>

Answer 3

尝试以下代码，

  <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
     <body>
        <div class="fusion-privacy-label">
             For privacy reasons Google Maps needs your permission to be loaded. For more details, please see our 
             <a class="privacy-policy-link" href="https://example.com/privacy/">Privacy</a>.
         </div>
         <script>
             $(document).ready(function() {
                 return $(".fusion-privacy-label").html().replace("For privacy 
                reasons Google Maps needs your permission to be loaded. For more 
                details, please see our ", "Here is some example translation text. 
                For more Details, please visit"); 
             });
          </script>
                   (or)
          <script>
             function translate(){
                 return $(".fusion-privacy-label").html().replace("For privacy 
                         reasons Google Maps needs your permission to be loaded. For 
                         more details, please see our ", "Here is some example 
                         translation text. For more Details, please visit"); 

              }
              setTimeout(translate, 1000);
          </script>
      </body>
  </html>

仅使用一次替换

3 个答案: