jquery - what is slowing down this webpage in my local server? -


this jsfiddle

    $(document).ready(function(){     $(".red").click(function(){         $(".red").addclass("selected");         $(".orange").removeclass("selected");         $(".yellow").removeclass("selected");         $(".green").removeclass("selected");         $(".lightblue").removeclass("selected");         $(".darkblue").removeclass("selected");         $(".pink").removeclass("selected");         $(".brown").removeclass("selected");         $(".black").removeclass("selected");         $(".white").removeclass("selected");     });     $(".orange").click(function(){         $(".orange").addclass("selected");         $(".red").removeclass("selected");         $(".yellow").removeclass("selected");         $(".green").removeclass("selected");         $(".lightblue").removeclass("selected");         $(".darkblue").removeclass("selected");         $(".pink").removeclass("selected");         $(".brown").removeclass("selected");         $(".black").removeclass("selected");         $(".white").removeclass("selected");     });     $(".yellow").click(function(){         $(".yellow").addclass("selected");         $(".orange").removeclass("selected");         $(".red").removeclass("selected");         $(".green").removeclass("selected");         $(".lightblue").removeclass("selected");         $(".darkblue").removeclass("selected");         $(".pink").removeclass("selected");         $(".brown").removeclass("selected");         $(".black").removeclass("selected");         $(".white").removeclass("selected");     });     $(".green").click(function(){         $(".green").addclass("selected");         $(".orange").removeclass("selected");         $(".yellow").removeclass("selected");         $(".red").removeclass("selected");         $(".lightblue").removeclass("selected");         $(".darkblue").removeclass("selected");         $(".pink").removeclass("selected");         $(".brown").removeclass("selected");         $(".black").removeclass("selected");         $(".white").removeclass("selected");     });     $(".lightblue").click(function(){         $(".lightblue").addclass("selected");         $(".orange").removeclass("selected");         $(".yellow").removeclass("selected");         $(".green").removeclass("selected");         $(".red").removeclass("selected");         $(".darkblue").removeclass("selected");         $(".pink").removeclass("selected");         $(".brown").removeclass("selected");         $(".black").removeclass("selected");         $(".white").removeclass("selected");     });     $(".darkblue").click(function(){         $(".darkblue").addclass("selected");         $(".orange").removeclass("selected");         $(".yellow").removeclass("selected");         $(".green").removeclass("selected");         $(".lightblue").removeclass("selected");         $(".red").removeclass("selected");         $(".pink").removeclass("selected");         $(".brown").removeclass("selected");         $(".black").removeclass("selected");         $(".white").removeclass("selected");     });     $(".pink").click(function(){         $(".pink").addclass("selected");         $(".orange").removeclass("selected");         $(".yellow").removeclass("selected");         $(".green").removeclass("selected");         $(".lightblue").removeclass("selected");         $(".darkblue").removeclass("selected");         $(".red").removeclass("selected");         $(".brown").removeclass("selected");         $(".black").removeclass("selected");         $(".white").removeclass("selected");     });     $(".brown").click(function(){         $(".brown").addclass("selected");         $(".orange").removeclass("selected");         $(".yellow").removeclass("selected");         $(".green").removeclass("selected");         $(".lightblue").removeclass("selected");         $(".darkblue").removeclass("selected");         $(".pink").removeclass("selected");         $(".red").removeclass("selected");         $(".black").removeclass("selected");         $(".white").removeclass("selected");     });     $(".black").click(function(){         $(".black").addclass("selected");         $(".orange").removeclass("selected");         $(".yellow").removeclass("selected");         $(".green").removeclass("selected");         $(".lightblue").removeclass("selected");         $(".darkblue").removeclass("selected");         $(".pink").removeclass("selected");         $(".brown").removeclass("selected");         $(".red").removeclass("selected");         $(".white").removeclass("selected");     });     $(".white").click(function(){         $(".white").addclass("selected");         $(".orange").removeclass("selected");         $(".yellow").removeclass("selected");         $(".green").removeclass("selected");         $(".lightblue").removeclass("selected");         $(".darkblue").removeclass("selected");         $(".pink").removeclass("selected");         $(".brown").removeclass("selected");         $(".black").removeclass("selected");         $(".red").removeclass("selected");     }); }); 

in jsfiddle working , running , acting smoothly. locally, acting slow , css3 transitions running choppy.

can explain me going on. if want check out full code have added pastebin.

thank replies!

this code slow because creating 10 functions, creating 10 jquery object in each, , call 10 function inside each function.

optimising code seems move here.

also, id's should unique, change id box class.

in case, didnt changed it, , have working code, had select attribute.

your code can reduced :

$(document).ready(function(){     $("[id=box]").click(function(){         $('[id=box]').removeclass('selected').filter(this).addclass('selected');     }); }) 

later, if change id class, selector $('.box').

fiddle : http://jsfiddle.net/erdgf/2/


Comments

Popular posts from this blog

Load Balancing in Bluemix using custom domain and DNS SRV records -

oracle - pls-00402 alias required in select list of cursor to avoid duplicate column names -

python - Consider setting $PYTHONHOME to <prefix>[:<exec_prefix>] error -