Jquery plugin with multiple instances -
hello tried multiple solutions find forums but, think need understand basic first :)
i created (very) simplified example of plugin want create , uses mouse events on different dom objects, on click divs change 'lime'. how can fix this?
<!doctype html> <html> <head> </head> <script src="jquery.js"></script> <script> (function ($, color, othercolor){ var othercolor= 'yellow'; $.fn.tester = function(color, othercolor){ othercolor= othercolor; this.css('background-color', color); this.on('click', changecolor); } function changecolor(e){ $(this).css('background-color', othercolor); } }(jquery)); </script> <script> $(document).ready(function(){ $('#tester').tester('green', 'purple'); $('#tester2').tester('black', 'gray'); $('#tester3').tester('orange', 'lime'); }); </script> <body> <div id="tester" class="row tester" style="width:100%; height: 100px; background-color: #0ff;"></div> <div id="tester2" class="row tester" style="width:100%; height: 100px; background-color: #0ff;"></div> <div id="tester3" class="row tester" style="width:100%; height: 100px; background-color: #0ff;"></div> </body> </html>
you need save color in closure. if use global variable, contains last color set.
this.on("click", function() { changecolor(this, othercolor); });
...
function changecolor(element, color) { element.css('background-color', color); }
Comments
Post a Comment