jQuery addClass example

Change class name on click in jQuery

by Serge Zahharenko

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="log">log</div>

CSS

body {overflow:scroll;overflow-x:hidden;}
	.circle-area {text-align:center;border-radius:100%;opacity:0.8;position:absolute;top:0;left:0;color:#000;font-weight:bold;}
	.circle-area > span {position:absolute;top:50%;left:0;width:100%;-webkit-transform: translate(0%, -50%);-moz-transform: translate(0%, -50%);-o-transform: translate(0%, -50%);-ms-transform: translate(0%, -50%);transform: translate(0%, -50%);}
	.point {position:absolute;top:0;left:0;width:6px;height:6px;margin:-3px;background:blue;z-index:100;border-radius:100%;}
	#log {position:fixed;top:0;left:0;padding:10px;z-index:100;}

JavaScript

$(function() {
		CIRCLES.init();
	});
	var CIRCLES = {
		crosspoints: [0,0,0],
		crossareas: [0,0,0],
		C: {
			C1: {id: 'C1',x:105,y:357,r:100,color:'red'},
			C2: {id: 'C2',x:137,y:281,r:50, color:'lime'},
			C3: {id: 'C3',x:212,y:270,r:25, color:'#00BCD4'}
		},
		intersectionResult: function(){
			var cA = this.C.C1;
			var cB = this.C.C2;
			var cC = this.C.C3;

			var res1 = this.intersectionDots(cA.x,cA.y,cA.r,cB.x,cB.y,cB.r);
			var are1 = this.intersectionArea(cA.x,cA.y,cA.r,cB.x,cB.y,cB.r);

			var res2 = this.intersectionDots(cA.x,cA.y,cA.r,cC.x,cC.y,cC.r);
			var are2 = this.intersectionArea(cA.x,cA.y,cA.r,cC.x,cC.y,cC.r);

			var res3 = this.intersectionDots(cB.x,cB.y,cB.r,cC.x,cC.y,cC.r);
			var are3 = this.intersectionArea(cB.x,cB.y,cB.r,cC.x,cC.y,cC.r);

			this.crosspoints = [res1,res2,res3];
			this.crossareas  = [are1,are2,are3];

			$('#log').html(this.getAreas() + '<br/>' + this.getIntersectionAreas());
		},
		getAreasHtml:false,
		getAreas: function(){
			/* Temporary data for LOG */
			if (this.getAreasHtml) {
				return this.getAreasHtml;
			} else {
				var html = '';
				for(var c in CIRCLES.C) { 
					var cir = CIRCLES.C[c];
					html += '<strong style="color:'+cir.color+'">'+cir.id+':</strong> ';
					html += parseInt(cir.r * cir.r * Math.PI,10) + '<br/>';
				}
				this.getAreasHtml = html;
				return html;
			}
		},
		getIntersectionAreas: function(){
			/* Temporary data for LOG */
			var html = '';
			for (i=0;i<this.crossareas.length;i++) {
				html += '<strong>A'+(i+1)+':</strong> ' + parseInt(this.crossareas[i]) + '<br/>';
			}
			return html;
		},
		dragUpdate: function(circle,y,x){
			CIRCLES.C[circle].y = y;
			CIRCLES.C[circle].x = x;
			this.intersectionResult();
			this.updateUI()
		},
		updateUI: function(){
			for (i=0;i<this.crosspoints.length;i++) {
				if (this.crosspoints[i])...