[Resuelto] duda de script

[fernandorb10]

buenas noches,

Soy nuevo en este foro y no se bien si esto va aqui, saludos a todos. Espero ayudar y ser ayudado.


Al grano, mi duda es que tengo un script de cambio de idioma en mi hotspot y es el siguiente.

Código (javascript) [Seleccionar] Expandir

<script type="text/javascript" >
var idioma = "hispano";
function ponerIdioma(cual)   {
  document.getElementById(idioma).style.display = "none";
 

  idioma = cual;

  document.getElementById(idioma).style.display = "block";
 
 
}
</script>

BOTONES

Código (html4strict) [Seleccionar] Expandir

<button onClick="ponerIdioma('english');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/United_Kingdom64.png";> <br>Click here for English Instructions</button>
 
 
  <button onClick="ponerIdioma('aleman');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/Germany64.png";> <br>Klick hier für die  Anweisung in deutsch</b></button>
 
 
   <button onClick="ponerIdioma('hispano')" name="boton" style='width:120px; height:120px'  type="submit"><img src="img/Spain64.png"; > <br>Pincha aquí para instruciones en español.</button>



Y estos son los div con la id de (hispano, english o aleman)

Código (html4strict) [Seleccionar] Expandir

<div id="hispano" >
           texto en español.
        </div>
       
        <div id="english" style="display: none;" >
           texto en ingles
        </div>
       
        <div id="aleman" style="display: none;" >
           TEXTO EN ALEMAN
        </div>


Vale, hasta aquí bien, funciona correctamente. Pero yo necesito que cambie mas div aparte de este texto, necesito que cambie dos div's mas. En total al pinchar al boton tiene que hacer 3 cambios de texto o imagen en la pagina.

¿Como podria hacerlo?

Gracias de antebrazo

Mod: Obligatorio el uso de etiquetas GeSHi.

[MinusFour]

Sin saber la estructura de tu archivo HTML y los elementos en especifico que quieres cambiar, no podemos ayudarte. Te recomiendo que uses clases para elementos del mismo idioma:

Código (html5) [Seleccionar] Expandir


<div class="english">Text1</div>
<div class="english">Text2</div>
<div class="english">Text3</div>

<div class="hispano">Text1</div>
<div class="hispano">Text2</div>
<div class="hispano">Text3</div>

Posible javascript:

Código (javascript) [Seleccionar] Expandir


var idioma = "hispano";
function ponerIdioma(cual)   {
   [idioma, cual].forEach(function(i){
       toggleClassVisibility(i);
       idioma = i;
   });
}

function toggleClassVisibility(cs){
   var ele = document.getElementsByClassName(cs);
   Array.prototype.forEach.call(ele, function(el){
      el.style.display = el.offsetParent !== null ? 'none' : 'block';
   });
}

Con jQuery es mucho más sencillo:

Código (javascript) [Seleccionar] Expandir


var idioma = "hispano";
function ponerIdioma(cual){
   $('.' + idioma).hide();
   $('.' + cual).show();
   idioma = cual;
}

[fernandorb10]

Sin saber la estructura de tu archivo HTML y los elementos en especifico que quieres cambiar, no podemos ayudarte. Te recomiendo que uses clases para elementos del mismo idioma:

Código (html5) [Seleccionar] Expandir


<div class="english">Text1</div>
<div class="english">Text2</div>
<div class="english">Text3</div>

<div class="hispano">Text1</div>
<div class="hispano">Text2</div>
<div class="hispano">Text3</div>

Posible javascript:

Código (javascript) [Seleccionar] Expandir


var idioma = "hispano";
function ponerIdioma(cual)   {
  [idioma, cual].forEach(function(i){
      toggleClassVisibility(i);
      idioma = i;
  });
}

function toggleClassVisibility(class){
  var ele = document.getElementsByClassName(class);
  Array.prototype.forEach.call(ele, function(el){
     el.style.display = el.style.display === 'none' ? 'block' : 'none';
  });
}

Con jQuery es mucho más sencillo:

Código (javascript) [Seleccionar] Expandir


var idioma = "hispano";
function ponerIdioma(cual){
   $('.' + idioma).hide();
   $('.' + cual).show();
   idioma = cual;
}

Buenas Minus, muchisimas gracias por tu ayuda, pero aún no me funciona.

Veamos, he puesto el script de jQuery y he puesto los div tal como me has pedido.

<script type="text/javascript" >
   var idioma = "hispano";
   function ponerIdioma(cual){
       $('.' + idioma).hide();
       $('.' + cual).show();
       idioma = cual;
   }

</script>

Pero en el boton onclick deberia de cambiar algo?

<button onClick="ponerIdioma('hispano');" name="boton" style='width:120px; height:120px'  type="submit"><img src="img/Spain64.png"; > <br>Pincha aquí para instruciones en español.</button>

[MinusFour]

Como te explique en el tema anterior, depende mucho de la estructura final de tu HTML, la cual no tenemos. Porfavor, usa las etiquetas [code ] [ /code] necesarias. Espero tambien que hayas cargado jQuery.

[fernandorb10]

De acuerdo, ya entiendo lo de la etiqueta code.4

Script le cargo así o bien le pongo en la pagina de index.html mia como te pusé arriba.

Código [Seleccionar] Expandir


<script src="jquery.js"></script>


La estructura es sencilla, es un html que tiene 3 botones, uno para cada idioma (aleman, ingles y español), al pinchar en uno de esos botones tiene que cambiar 2 imagenes que ya tengo en mi carpeta de img (al pinchar en boton ingles cambia 2 imagenes a imagenespañol1 a imageningles1 y imagenespañol2 por imageningles2 por ejemplo)  y el texto que ya tengo en esos idiomas.  

BOTONES:

Código (html4strict) [Seleccionar] Expandir

<button onClick="ponerIdioma('english');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/United_Kingdom64.png";> <br>Click here for English Instructions</button>
<button onClick="ponerIdioma('aleman');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/Germany64.png";> <br>Klick hier für die  Anweisung in deutsch</b></button>
<button onClick="ponerIdioma('hispano');" name="boton" style='width:120px; height:120px'  type="submit"><img src="img/Spain64.png"; > <br>Pincha aquí para instruciones en español.</button>




Gracias por tu ayuda.

[MinusFour]

Si, pero eso no es todo el codigo HTML. Necesitamos ver el código HTML de los contenedores.

[fernandorb10]

Código (javascript) [Seleccionar] Expandir


<table width="10%" style="margin-top: 10%;"   bgcolor="white" opacity: 0.3;>
<th colspan=2> <h1> <font size="15px" color="#073763"> INSTRUCTIONS FOR USE
<br>

<button onClick="ponerIdioma('english');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/United_Kingdom64.png";> <br>Click here for English Instructions</button>


<button onClick="ponerIdioma('aleman');" name="boton" style='width:120px; height:120px' type="submit"><img src="img/Germany64.png";> <br>Klick hier für die  Anweisung in deutsch</b></button>


<button onClick="ponerIdioma('hispano');" name="boton" style='width:120px; height:120px'  type="submit"><img src="img/Spain64.png"; > <br>Pincha aquí para instruciones en español.</button>

</font> </h1></th>


<tr>  
<td>
<div class="hispano" >
<img src="img/eslogin.png">
</div>

<div class="english" style="display: none;" >
<img src="img/button9.png">
</div>

<div class="aleman" style="display: none;" >
<img src="img/button.png">
</div>





</td>
<td>


<div class="hispano" >
<img src="img/esusers.png"  alt="Español"/>
</div>

<div class="english" style="display: none;" >
<img src="img/button10.png"  alt="Español"/>
</div>

<div class="aleman" style="display: none;" >
<img src="img/button.png">
</div>




</td>
</tr>
<tr>
<td>




<div class="hispano"  >
<div style="color:black; font-size: 16px"> <b>TEXTO EN ESPAÑOL </b> </div>
</div>

<div class="english" style="display: none;"  >
<div style="color:black; font-size: 16px"> TEXTO EN INGLES</div>

</div>

<div class="aleman" style="display: none;" >
<div style="color:black; font-size: 16px"> TEXTO EN ALEMAN </b></div>

</div>

</td>
<td align="center">
IMAGEN
</td>
</tr>



</table>


</td>
</tr>
</table>


Necesitas algo mas?

[MinusFour]

Pues el código en jQuery funciona:

https://jsfiddle.net/r10hgn2r/

El código en Vanilla javascript necesita cambios.

[fernandorb10]

Pues el código en jQuery funciona:

https://jsfiddle.net/r10hgn2r/

El código en Vanilla javascript necesita cambios.

guau minus, ahora hace falta meterlo al notepad que no me funciona. Dime si ves algo erroneo que a mi vista se escapa

Código [Seleccionar] Expandir



<!doctype html>

<html>

  <head>
    <title>A blank HTML page</title>
    <meta charset="utf-8" />

    <script type="text/javascript">

      var idioma = "hispano";
function ponerIdioma(cual){
   $('.' + idioma).hide();
   $('.' + cual).show();
   idioma = cual;
}

    </script>

  </head>

  <body>
<button onclick="ponerIdioma('english')">English</button>
<button onclick="ponerIdioma('hispano')">Hispano</button>

<div class="english" style="display: none;">Ingles</div>
<div class="english" style="display: none;">Ingles</div>
<div class="english" style="display: none;">Ingles</div>

<div class="hispano">Español</div>
<div class="hispano">Español</div>
<div class="hispano">Español</div>
  </body>

</html>



[MinusFour]

No tienes importado jQuery.