JQuery Prototype Example

This is an jQuery Prototype Example. It show you that it is possible to use function for more than one Element without IDs

by scurrilus

HTML

<div class="prototypeTest">
	<button class="button">click me 1</button>
</div>

<div class="prototypeTest">
	<button class="button">click me 2</button>
</div>

<script>
jQuery(document).ready(function() {
	jQuery(".prototypeTest").exampleFunction({show: false});
});
</script>

JavaScript

function ExampleFunction(rootNode, opts) {
	this.rootNode = rootNode;
	this.opts = opts;
	this.init();
}

ExampleFunction.prototype.init = function () {
	// var that is required if you want call this from first Level
  var that = this;
	window.console.log("Do something you want");
	
	jQuery(this.rootNode).find("button").on("click", function() {
		window.console.log("Button was clicked");
   	that.buttonText = jQuery(this).text();
			
		// Call other function
		that.otherFunction();
	});
};

ExampleFunction.prototype.otherFunction = function () {
	if (this.opts.show === true) {
		window.console.log("Other Function", this.opts.show, this.buttonText);
	}
	else {
		window.console.log("Other Function", this.opts.show, this.buttonText);
	}	
};

jQuery.fn.exampleFunction = function (opts) {
   return this.each(function () {
      new ExampleFunction(this, opts);
   });
};