Se puede optimizar más este codigo?

[z3nth10n]

Hola, pues el código es el siguiente.

Código (html) [Seleccionar] Expandir


<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
   $(document).ready(function () {
   $('.eurowrapper').hide();
   $('#def').show();
   $('#drop2').change(function () {
       $('.eurowrapper').hide();
       $('#'+$(this).val()).show();
   })
   });
</script>
 <b>Link del juego:</b>
  <input type="text" value="" name="link_juego" />
  <select name="tipo_de_juego" id="drop2">
     <!-- disabled="disabled" no permite seleccionar ese elemento -->
     <option value="" selected="selected" disabled="disabled">Selecciona el tipo de Juego</option>
     <option value="" disabled="disabled">---</option>
     <option value="" disabled="disabled"></option>
     <!-- Agregamos el tipo de juego -->
     <option value="flash">Flash</option>
     <option value="java">Java</option>
     <option value="unity">Unity3D</option>
     <option value="iframe">iFrame</option>
     <option value="otro">C&oacute;digo propio</option>
  </select>
<span id="def" class="eurowrapper"><br>
<br><b>Ancho:</b> <input type="text" name="ancho" id="ancho" MAXLENGTH=4 SIZE=1 /> px.
<br><b>Alto:</b> <input type="text" name="alto" id="alto" MAXLENGTH=4 SIZE=1 /> px.
<br></span>
<span id="flash" class="eurowrapper"><br>
<br><b>Ancho:</b> <input type="text" name="ancho" id="ancho" MAXLENGTH=4 SIZE=1 /> px.
<br><b>Alto:</b> <input type="text" name="alto" id="alto" MAXLENGTH=4 SIZE=1 /> px.
<br></span>
<span id="java" class="eurowrapper"><br>
<br><b>Ancho:</b> <input type="text" name="ancho" id="ancho" MAXLENGTH=4 SIZE=1 /> px.
<br><b>Alto:</b> <input type="text" name="alto" id="alto" MAXLENGTH=4 SIZE=1 /> px.
<br></span>
<span id="unity" class="eurowrapper"><br>
<br><b>Ancho:</b> <input type="text" name="ancho" id="ancho" MAXLENGTH=4 SIZE=1 /> px.
<br><b>Alto:</b> <input type="text" name="alto" id="alto" MAXLENGTH=4 SIZE=1 /> px.
<br></span>
<span id="iframe" class="eurowrapper"><br>
<br><b>Ancho:</b> <input type="text" name="ancho" id="ancho" MAXLENGTH=4 SIZE=1 /> px.
<br><b>Alto:</b> <input type="text" name="alto" id="alto" MAXLENGTH=4 SIZE=1 /> px.
<br></span>
<span id="otro" class="eurowrapper"><br><br>
<textarea rows="5" cols="100" name="code" id="code" MAXLENGTH=5000></textarea><br>
<b><i>* Recuerda de poner el Ancho y alto, el embed correctamente, y link del juego. ;)<br>PD: El m&aacute;ximo de caracteres permitidos es 5000.</i></b>
<br></span>
<br>


Un saludo.

[dank_]

Ya que no estás usando XHTML, puedes cambiar los  selected="selected" por selected y los disabled="disabled" por disabled.

Te aconsejo poner todos los atributos de HTML en minúsculas más que nada por legibilidad y concordancia.

En lo personal eliminaría todos los rows y cols y dejaría todo el diseño para el CSS. Lo cual también incluye los saltos de linea,  evita las etiquetas <br> y mejor encierra todo en etiquetas de bloque (divs), te serán más útiles si piensas cambiar el diseño después.

Si pones tú script después del HTML que vas a modificar puedes ahorrarte el $(document).ready().

Puedes usar la etiqueta "label" con el atributo "for" para que cuando se de clic en un texto ponga el cursor directo en el input que se va a modificar.

Por ejemplo así:

<label for="ancho">Ancho:</label> <input type="text" name="ancho" id="ancho" maxlength="4" size="1" /> px.

[z3nth10n]

Yo a lo que me venía a referir era a que si se podia hacer una matriz de elementos con lo de Show/Hide...