Question

我正在使用具有<h1 data-i18next="header-title" class="header__title"> <span data-i18next="header__subtitle" class="header__subtitle"></span> </h1>属性的翻译元素的以下代码：

<h1 data-i18next="header-title" class="header__title">translated-text</h1>

但它取代了所有子元素。

我有span子元素的h1元素：

<h1 data-i18next="header-title">translated-title
    <span data-i18next="header__subtitle">translated-span</span>
</h1>

运行翻译功能后，它变为：

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://connect.stripe.com/oauth/token",
  "method": "POST",
  "headers": {
    "content-type": "application/x-www-form-urlencoded",
    "cache-control": "no-cache",
  },
  "data": {
    "client_secret": "sk_test_f7PKXx5NRBFG5r41nTrPT7qB",
    "code": "\"{AUTHORIZATION_CODE}\"",
    "grant_type": "authorization_code"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

但我需要留下儿童用品。没有jquery。

我需要的结果：

var data = "client_secret=sk_test_f7PKXx5NRBFG5r41nTrPT7qB&code=%22%7BAUTHORIZATION_CODE%7D%22&grant_type=authorization_code";

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "https://connect.stripe.com/oauth/token");
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("cache-control", "no-cache");

xhr.send(data);

Answer 1

创建一个textnode并将其添加到元素中。这应该根据您的编辑结果找到。

函数i18next.t（）未知，因为您没有提供它。因此，我现在用属性文本替换它。

<html>
    <head>
        <script>
            //Scope for the little translator and the list of textnodes
            ;(function(ns){
                'use strict';

                var _List = []; //Stores the created textnodes

                //Removes the textnodes from the List
                function _removeNodes(){
                    if(_List && _List.length){
                        for(var i=_List.length-1; i>=0; i--){
                            _List[i].parentNode && _List[i].parentNode.removeChild(_List[i])
                        };

                        _List = []
                    }
                };

                ns.Translator = {
                    Translate: function(){
                        _removeNodes();

                        const elementsToTranslate = document.querySelectorAll('[data-i18next]');
                        for (let i = 0; i < elementsToTranslate.length; i++){
                            var tE = elementsToTranslate[i];
                            var tText = tE.getAttribute('data-i18next'); //i18next.t(tE.getAttribute('data-i18next'));
                            var tN = document.createTextNode(tText);

                            _List.push(tN); //The node gets stored, so it can be removed again later

                            tE.insertBefore(tN, tE.firstChild)
                        }
                    }
                }
            }(window._ = window._ || {}));

            window.onload = function(){
                _.Translator.Translate()
                _.Translator.Translate()
                _.Translator.Translate()
            }
        </script>
    </head>

    <body>
        <h1 data-i18next="header-title" class="header__title">
            <span data-i18next="header__subtitle" class="header__subtitle"></span>
        </h1>
    </body>
</html>

结果：

<h1 data-i18next="header-title" class="header__title">header-title
    <span data-i18next="header__subtitle" class="header__subtitle">header__subtitle</span>
</h1>

更新。我想翻译它们：标题和跨度。

@caesay副标题是跨度，最好将其放入

如何更改HTML元素的文本，不要删除javascript中的子项？

1 个答案: