¿Cómo optimizar ésta función?

[tempto]

Hola a todos/as,

Tengo una función de js, bastante simple, oculta un div y muestra otro, pero es un poco larga, porque hay varios div, cómo puedo optimizarla para reducir el código a menos líneas, de js sé lo mínimo y ya de bucles...


La función en cuestión:

Código PHP:

  <script type="text/javascript"> 
 
            $(document).ready(function() { 
                $(".enlace_turismo_sig").click(function() { 
                    $("#uno").css("display", "none"); 
                    $("#dos").css("display", "block");} 
                ); 
                 
                $(".enlace_turismo_ant2").click(function() { 
                    $("#dos").css("display", "none");                                      
                    $("#uno").css("display", "block");} 
                ); 
                 
                $(".enlace_turismo_sig2").click(function() { 
                    $("#dos").css("display", "none"); 
                    $("#tres").css("display", "block");} 
                ); 
                 
                $(".enlace_turismo_ant3").click(function() { 
                    $("#tres").css("display", "none"); 
                    $("#dos").css("display", "block");} 
                ); 
                 
                $(".enlace_turismo_sig3").click(function() { 
                    $("#tres").css("display", "none"); 
                    $("#cuatro").css("display", "block");} 
                ); 
                 
                $(".enlace_turismo_ant4").click(function() { 
                    $("#cuatro").css("display", "none"); 
                    $("#tres").css("display", "block");} 
                ); 
            }); 
 
</script>  
  

[America|UNK]

Si obtienes un objeto($div) por su clase en Jquery, se aplica a todos los objetos con la misma clase, no tienes por que agregar diferente identificador de clase para cada objeto, si haces la misma función.

Código Javascript:

$(document).ready(function() {
                $(".enlace_turismo_sig, .enlace_turismo_ant2, 
.enlace_turismo_sig2, .enlace_turismo_ant3, .etc").click(function() {
                    $("#uno").hide()
                    $("#dos").show();}
                );
});
 

Si quieres optimizarlo aun mas, agregale otra clase a todos los divs que le asignas la función:
<div class="enlace_turismo_sig muestra2oculta1"></div>
<div class="enlace_turismo_ant2 muestra2oculta1"></div>

Quedaría:

Código Javascript:

$(document).ready(function() {
                $(".muestra2oculta1").click(function() {
                    $("#uno").hide()
                    $("#dos").show();
    });
});
 

PD: El tema va en Frameworks.

[netzky]

Ahi te va una ayudadita...

Código Javascript:

$(function(){
   $(".enlace_turismo").click(function(){
         $(".clase_secundaria_de_las_divisiones").hide();
         var id = $(this).attr("rel"); //Usar el Atributo REL del "Link" o "Enlace" para ahi especificar el ID del elemento a mostrar
         $("#" + id).show();
         return false;
   });
 
});
 

Espero te sirva, algun problema o duda no dudes en avisar.. saludos

[tempto]

La función que has puesto America|UNK, sería para dos 2 divs, pero en mi caso tengo 4 y cada enlace es diferente en lo que tiene que mostrar y ocultar.

La función tuya, netzky, a los enlaces he visto que tengo que añadirle al atributo rel, cuando pulso un enlace, almacena ese nombre en la variable id y lo muestra. Pero la parte de ocultar no la entiendo bien, ¿cómo le paso el nombre del que debe ocultar?, porque no es fijo, depende del que se esté mostrando.