Return text to the original with Jquery

Question

Return text to the original with Jquery

Navigation

#1 by (0 votes)

1

I am trying to make a site in which through a simple click the client can change the language of some texts.

    $(document).ready(function(){
     $("#miboton").click(function(){
        $("#micapa").html("Nuevo texto para cambiar");
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="micapa">Texto</div>
<a href="#" id="miboton">Cambiar el contenido</a>

What I want to do is also give you the option of going back to the original text, it is supposed to change the language, but I can not make it return original language. I hope you help me and thank you

jquery html div

asked by 02.04.2018 в 05:36

source

1 answer

DataTable Primefaces Property copy cells yii problems with my dependent menu

score 0 · Accepted Answer

1 Storing the original text (if there are many it's half madness)

$(document).ready(function(){
  var almacenamientoTemporal = $("#micapa").html();
  $("#miboton").click(function(){
    $("#micapa").html("Nuevo texto para cambiar");
  });
  $("#miotroboton").click(function(){
    $("#micapa").html(almacenamientoTemporal);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="micapa">Texto</div>

<a href="#" id="miboton">Cambiar el contenido</a><br />
<a href="#" id="miotroboton">Restaurar el contenido</a>

2 using array of translations

$(document).ready(function(){
  var arrayTextos = 
    {1:{'es':'Texto uno en español', 'en':'Text one in Englisch'},
     2:{'es':'Texto dos en español', 'en':'Text two in Englisch'}};
  $(".cambia").click(function(){
   var lang = $(this).data("lang");
   
   $(".texto").each(function(){
     var textoID = $(this).data("id");
     $(this).html(arrayTextos[textoID][lang]);
     });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-id="1" class="texto">Texto 1 en Español (por omisión)</div>
<div data-id="2" class="texto">Texto 2 en Español (por omisión)</div>

<a href="#" class="cambia" data-lang="es">Cambiar el contenido a Español</a><br />
 <a href="#" class="cambia" data-lang="en">Change content to English</a><br />