Foros del Web » Programando para Internet » Jquery »

Simplificar código jQuery

Estas en el tema de Simplificar código jQuery en el foro de Jquery en Foros del Web. Saludos! Bueno, estoy haciendo una web para vender en themeforest. Ya finalicé casi todo, aún así me gustaría limpiar un poco el código js para ...
  #1 (permalink)  
Antiguo 30/08/2013, 21:02
 
Fecha de Ingreso: agosto-2013
Mensajes: 1
Antigüedad: 10 años, 8 meses
Puntos: 0
Simplificar código jQuery

Saludos! Bueno, estoy haciendo una web para vender en themeforest. Ya finalicé casi todo, aún así me gustaría limpiar un poco el código js para hacerlo ''más bonito'', y de paso aprender un poco más de este lenguaje.

El código es este, una repetición de eventos js con jquery, no tengo ni idea de como simplificarlos :S:

Código:
    var cimage = 'images/circule/summer.jpg';

   $("#about").mouseover(function(){
      $("#circule").attr('src','images/circule/airplane.jpg');
   });
    $("#about").mouseout(function(){
      $("#circule").attr('src', cimage);
   });

 $("#skills").mouseover(function(){
      $("#circule").attr('src','images/circule/ford.jpg');
   });
   $("#skills").mouseout(function(){
      $("#circule").attr('src',cimage);
   });

    $("#portfolio").mouseover(function(){
      $("#circule").attr('src','images/circule/war.jpg');
   });
   $("#portfolio").mouseout(function(){
      $("#circule").attr('src',cimage);
   });

    $("#blog").mouseover(function(){
      $("#circule").attr('src','images/circule/ferrari.jpg');
   });
   $("#blog").mouseout(function(){
      $("#circule").attr('src',cimage);
   });

    $("#contact").mouseover(function(){
      $("#circule").attr('src','images/circule/lg.jpg');
   })
   $("#contact").mouseout(function(){
      $("#circule").attr('src',cimage);
   });


                      /* CONTAINERS JS */

    $("#ABcontainer").hide();
 
  $('#about').on('click',function(){
****$('#ABcontainer').toggle('slow');
});
 
  $("#SKcontainer").hide();


  $('#skills').on('click',function(){
****$('#SKcontainer').toggle('slow');
});

  $("#PFcontainer").hide();


  $('#portfolio').on('click',function(){
****$('#PFcontainer').toggle('slow');
});

  $("#BLOGcontainer").hide();

  $('#blog').on('click',function(){
****$('#BLOGcontainer').toggle('slow');
});

    $("#CNcontainer").hide();

  $('#contact').on('click',function(){
****$('#CNcontainer').toggle('slow');
});

                /* SINGULAR PROYECTS JS */

    $('#PROYECT1').hide();
        
    $('#PROYECT2').hide();

    $('#PROYECT3').hide();

    $('#PROYECT4').hide();

    $('#PROYECT5').hide();

    $('#PROYECT6').hide();

$('#proyect1').on('click',function(){
  $('#PROYECT1').toggle('slow');
});

$('#proyect2').on('click',function(){
  $('#PROYECT2').toggle('slow');
});

$('#proyect3').on('click',function(){
  $('#PROYECT3').toggle('slow');
});

$('#proyect4').on('click',function(){
  $('#PROYECT4').toggle('slow');
});

$('#proyect5').on('click',function(){
  $('#PROYECT5').toggle('slow');
});

$('#proyect6').on('click',function(){
  $('#PROYECT6').toggle('slow');
});

$('.cancelation').on('click',function(){
  $('.infoproyect').hide('slow')
});
Como veis se basa en la repetición del mismo evento pero con elementos distintos del DOM.

Agradezco todo comentario o ayuda de antemano :P.

Gracias!

Etiquetas: javascript, js, simplificar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:34.