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
Post a Comment