分享
三行代码  ›  专栏  ›  技术社区  ›  Márton Stark

如何对Jquery对象进行行制动

  •  0
  • Márton Stark  · 技术社区  · 5 天前

    \n <br>

    这是我的密码:

    var arrLang = {  
        "en": {
            "text": "See Budapest, the Queen of the Danube from brand new perspective as you have never seen before!" 
        },
    
        "ger": {
             "text": "Nézd meg Budapestet,"
    
        }
      }; 
    
      var lang = "en";
      if('localStorage' in window){
         
         var usrLang = localStorage.getItem('uiLang');
         if(usrLang) {
             lang = usrLang
         }
      
      }
              $(document).ready(function() {
                $(".lang").each(function(index, element) {
                  $(this).text(arrLang[lang][$(this).attr("key")]);
                });
              });
    
              $(".translate").click(function() {
               var lang = $(this).attr("id");
      
                // update localStorage key
                if('localStorage' in window){
                     localStorage.setItem('uiLang', lang);
                     console.log( localStorage.getItem('uiLang') );
                }
      
                $(".lang").each(function(index, element) {
                  $(this).text(arrLang[lang][$(this).attr("key")]);
                });
              });
      
    p {
      height: 150px;
      width: 380px;
      background-color: grey;
      text-align:center
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div>
      <a href="" id="en" class="translate">English</a>
      <a href="" id="ger" class="translate">German</a>
      <p class="lang" key="text">
        Lorem ipsum dolor sit amet <br> consectetur, adipisicing elit. <br>
     Ut hic amet eius soluta exercitationem <br> 
      sunt et ad in, aspernatur at. <br> 
        Facere voluptatem quasi, enim <br>
      </p>
    </div>

    2 回复  |  直到 5 天前
        1
  •  0
  •   Ja Nosch    5 天前

    您可以使用任何唯一的字符串(如\n)并在设置文本后解析最终对象。

    var arrLang = {  
        "en": {
            "text": "See Budapest, the Queen \n of the Danube from brand new perspective as you have never seen before!" 
        },
    };
    
    
    $(this).text(arrLang[lang][$(this).attr("key")]);
    $(this).html(this.html().replace(/\n/g,'<br/>'));
    
        2
  •  0
  •   AsyncAwaitFetch    5 天前

    $(this).text(arrLang[lang][$(this).attr("key")]); 将编辑文本。所以
    如果你使用 .html .text <br> 它将添加一个换行符。即 $(this).html(arrLang[lang][$(this).attr("key")]);

        3
  •  0
  •   Twisty    5 天前

    由于代码段不提供对LocalStorage的访问,我创建了以下Fiddle:

    https://jsfiddle.net/Twisty/6c02z1gj/24/

    <div>
      <a href="" id="en" class="translate">English</a>
      <a href="" id="ger" class="translate">German</a>
      <p class="display languange">
        Lorem ipsum dolor sit amet <br> consectetur, adipisicing elit. <br> Ut hic amet eius soluta exercitationem <br> sunt et ad in, aspernatur at. <br> Facere voluptatem quasi, enim <br>
      </p>
    </div>
    

    CSS格式

    p {
      height: 150px;
      width: 380px;
      background-color: grey;
      text-align: center
    }
    

    JavaScript语言

    $(function() {
      var arrLang = {
        "en": {
          "text": "See Budapest,\r\nthe Queen of the Danube\r\nfrom brand new perspective\r\nas you have never seen before!"
        },
        "ger": {
          "text": "Nézd meg Budapestet,"
        }
      };
    
      function nlToBr(string) {
        return string.replaceAll("\r\n", "<br />");
      }
    
      function loadText(arr, target, language, append) {
        if (append == undefined) {
          append = false;
        }
        if (language == undefined) {
          language = "en"
        }
        var myText = nlToBr(arr[language].text);
        if (target == undefined) {
          return myText;
        }
        if (append) {
          $(target).append(myText);
        } else {
          $(target).html(myText);
        }
        return true;
      }
    
      function getLanguage() {
        var l = localStorage.getItem("lang");
        if (!l) {
          l = "en";
        }
        return l;
      }
    
      function saveLanguage(l) {
        if (l != undefined) {
          localStorage.setItem("lang", l);
        }
      }
    
      $(".display").each(function(index, element) {
        loadText(arrLang, element, getLanguage());
      });
    
      $(".translate").click(function(event) {
        event.preventDefault();
        saveLanguage($(this).attr("id"));
    
        $(".display").each(function(index, element) {
          loadText(arrLang, element, getLanguage());
          $(element).data("languange", getLanguage());
        });
      });
    });
    

    对于HTML中的换行符,可以使用很多方法。我曾经 <br /> 对于这个例子。在JavaScript或JSON中,您需要使用公共回车换行格式: \r\n \\r\n < 正确显示。