Necesito ayuda para reducir este codigo

Carmenj · #1 (**permalink**) 21/02/2011, 10:29

Hola, quería hacer una toltip sencilla y por fin encontré una, pero yo quería hacerla en varios colores diferentes y lo único que entiendo de javascript es copiar y pegar, a si que hice el mismo código con varios colores, el resultado es precisamente lo que no quería, un código demasiado largo, con lo cual me gustaría que me ayudarais a reducir todos los códigos en uno, muchas gracias.

El codigo original es este

Código:

this.vtip = function() {
    this.xOffset = -10; 
    this.yOffset = 10; 

    $(".vtip").unbind().hover(    
        function(e) {
            this.t = this.title;
            this.title = '';
            this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
            
            $('body').append( '<p id="vtip"><img id="vtipArrow" />' + this.t + '</p>' );
                        
            $('p#vtip #vtipArrow').attr("src", 'images/vtip_arrow.png');
            $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");

        },
        function() {
            this.title = this.t;
            $("p#vtip").fadeOut("slow").remove();
        }
    ).mousemove(
        function(e) {
            this.top = (e.pageY + yOffset);
            this.left = (e.pageX + xOffset);

            $("p#vtip").css("top", this.top+"px").css("left", this.left+"px");
        }
    );

};

jQuery(document).ready(function($){vtip();})

y yo lo he echo así de largo, cada color en uno

Código:

<script type="text/javascript">
this.vtipblue=function(){this.xOffset=-180;this.yOffset=-60;$(".vtipblue").unbind().hover(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtipblue"><img id="vtipblueArrow" />'+this.t+"</p>");$("p#vtipblue #vtipblueArrow").attr("src","http://fler.salumguilher.me/wp-content/themes/FLER/ddpanel/shortcodes/images/shortcodes/tooltips/arrow-blue.png");$("p#vtipblue").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$("p#vtipblue").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("p#vtipblue").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtipblue()});
</script>
<script type="text/javascript">this.vtiporange=function(){this.xOffset=-180;this.yOffset=-60;$(".vtiporange").unbind().hover(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtiporange"><img id="vtiporangeArrow" />'+this.t+"</p>");$("p#vtiporange #vtiporangeArrow").attr("src","http://fler.salumguilher.me/wp-content/themes/FLER/ddpanel/shortcodes/images/shortcodes/tooltips/arrow-orange.png");$("p#vtiporange").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$("p#vtiporange").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("p#vtiporange").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtiporange()});</script>

<script type="text/javascript">this.vtipred=function(){this.xOffset=-180;this.yOffset=-60;$(".vtipred").unbind().hover(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtipred"><img id="vtipredArrow" />'+this.t+"</p>");$("p#vtipred #vtipredArrow").attr("src","http://fler.salumguilher.me/wp-content/themes/FLER/ddpanel/shortcodes/images/shortcodes/tooltips/arrow-red.png");$("p#vtipred").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$("p#vtipred").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("p#vtipred").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtipred()});</script>

<script type="text/javascript">this.vtipgreen=function(){this.xOffset=-180;this.yOffset=-60;$(".vtipgreen").unbind().hover(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtipgreen"><img id="vtipgreenArrow" />'+this.t+"</p>");$("p#vtipgreen #vtipgreenArrow").attr("src","http://fler.salumguilher.me/wp-content/themes/FLER/ddpanel/shortcodes/images/shortcodes/tooltips/arrow-green.png");$("p#vtipgreen").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$("p#vtipgreen").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("p#vtipgreen").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtipgreen()});</script>

<script type="text/javascript">this.vtippurple=function(){this.xOffset=-180;this.yOffset=-60;$(".vtippurple").unbind().hover(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtippurple"><img id="vtippurpleArrow" />'+this.t+"</p>");$("p#vtippurple #vtippurpleArrow").attr("src","http://fler.salumguilher.me/wp-content/themes/FLER/ddpanel/shortcodes/images/shortcodes/tooltips/arrow-purple.png");$("p#vtippurple").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$("p#vtippurple").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("p#vtippurple").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtippurple()});</script>

<script type="text/javascript">this.vtippink=function(){this.xOffset=-180;this.yOffset=-60;$(".vtippink").unbind().hover(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtippink"><img id="vtippinkArrow" />'+this.t+"</p>");$("p#vtippink #vtippinkArrow").attr("src","http://fler.salumguilher.me/wp-content/themes/FLER/ddpanel/shortcodes/images/shortcodes/tooltips/arrow-pink.png");$("p#vtippink").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$("p#vtippink").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("p#vtippink").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtippink()});</script>

<script type="text/javascript">this.vtipgrey=function(){this.xOffset=-180;this.yOffset=-60;$(".vtipgrey").unbind().hover(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtipgrey"><img id="vtipgreyArrow" />'+this.t+"</p>");$("p#vtipgrey #vtipgreyArrow").attr("src","http://fler.salumguilher.me/wp-content/themes/FLER/ddpanel/shortcodes/images/shortcodes/tooltips/arrow-grey.png");$("p#vtipgrey").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$("p#vtipgrey").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("p#vtipgrey").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtipgrey()});</script>

<script type="text/javascript">this.vtiplight=function(){this.xOffset=-180;this.yOffset=-60;$(".vtiplight").unbind().hover(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtiplight"><img id="vtiplightArrow" />'+this.t+"</p>");$("p#vtiplight #vtiplightArrow").attr("src","http://fler.salumguilher.me/wp-content/themes/FLER/ddpanel/shortcodes/images/shortcodes/tooltips/arrow-light.png");$("p#vtiplight").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$("p#vtiplight").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("p#vtiplight").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtiplight()});</script>

<script type="text/javascript">this.vtipblack=function(){this.xOffset=-180;this.yOffset=-60;$(".vtipblack").unbind().hover(function(a){this.t=this.title;this.title="";this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("body").append('<p id="vtipblack"><img id="vtipblackArrow" />'+this.t+"</p>");$("p#vtipblack #vtipblackArrow").attr("src","http://fler.salumguilher.me/wp-content/themes/FLER/ddpanel/shortcodes/images/shortcodes/tooltips/arrow-black.png");$("p#vtipblack").css("top",this.top+"px").css("left",this.left+"px").fadeIn("slow")},function(){this.title=this.t;$("p#vtipblack").fadeOut("slow").remove()}).mousemove(function(a){this.top=(a.pageY+yOffset);this.left=(a.pageX+xOffset);$("p#vtipblack").css("top",this.top+"px").css("left",this.left+"px")})};jQuery(document).ready(function(a){vtipblack()});</script>

Abría manera de reducirlo a uno, gracias.

_cronos2 · #2 (**permalink**) 21/02/2011, 11:39

A ver así:

Código Javascript:

Ver originalvar colores = ['red', 'orange', 'green']; // ...
var este = this;
for(var i = 0; act = colores[i]; i++){
 este['vtip'+act] = function(){
  // Aquí donde quieras poner el color pues acabas la cadena, lo añades y
  // la empiezas otra vez. Ej: 'id="vtip'+act+'"'
 }
}

Esto lo que hace es crear una función para cada color, si lo que quieres es una única función pues le pasas como parámetro el color y listo.
Saludos (:

Carmenj · #3 (**permalink**) 21/02/2011, 12:14

Muchas gracias lo probare ahora mismo.