Maintain State in jquery plugin

Question

I created a jquery plug-in. See following.

$.fn.changeColor = function(optionOrAction){ if (typeof optionOrAction == 'object'){ $.fn.changeColor.option = $.extend({}, $.fn.changeColor.option, optionOrAction); } if (typeof optionOrAction == 'object' || optionOrAction == ''){ $(this).css('border', '3px solid red'); } if (optionOrAction == 'showOption'){ alert($.fn.changeColor.option.showColor); } } $.fn.changeColor.option = {};

I tried to use it below.

$(document).ready(function(){ $('#test1').changeColor({ showColor: 'red'}); $('#test2').changeColor({ showColor: 'blue'}); $('#showButton').click(function(){ $('#test1').changeColor('showOption'); $('#test2').changeColor('showOption'); }); });

For test1 plugin, I have set red to showColor option. For test2 plugin, I have set blue to showColor option.

When we call the method of test1 and test2, there should be red for test1 and blue for test2.

Currently, the two plugin shows blue in alert.

The problem is that jquery plugin can't maintain data for multi usage. So, How can I change it to main data in plugin?

The question The problem is that when I call show option method of plug in, the two alerts are blue. How to maintain state in jquery plugin is not clear. Explain the desired behavior. — Tushar
– Tushar, Commented Aug 12, 2015 at 7:57
possible duplicate of jquery plugin how to maintain state of object — Amit
– Amit, Commented Aug 12, 2015 at 7:59

Soundar · Accepted Answer · 2015-08-23 11:47:18Z

To create a simple and clean jQuery plugin, you can use the jQuery boilerplate templates.

You can refer the below basic template to start a simple plugin. It definitely useful to you: https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.js

However i have modified your plugin structure to maintain the state, you can check the below:

$.fn.changeColor = function(optionOrAction){	var $this = $(this).eq(0); var obj = $this.data("changeColor"); if(!obj) obj = $.fn.changeColor.option;	if (typeof optionOrAction == 'object'){ obj = $.extend({}, obj, optionOrAction); $this.data("changeColor", obj);	}	if (typeof optionOrAction == 'object' || optionOrAction == ''){ $this.css('border', '3px solid red');	}	if (optionOrAction == 'showOption'){ alert(obj.showColor);	} } $.fn.changeColor.option = {}; $('#test1').changeColor({ showColor: 'red'}); $('#test2').changeColor({ showColor: 'blue'}); $('#showButton').click(function(){ $('#test1').changeColor('showOption'); $('#test2').changeColor('showOption'); });

#test1, #test2 { padding: 10px 40px; background: #eee; display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="test1">test1</div> <br /><br /> <div id="test2">test2</div> <br /><br /> <button id="showButton">Show</button>

Collectives™ on Stack Overflow

Maintain State in jquery plugin

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related