JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<ul data-container="change">
	<li data-action="change">click me 1</li>
	<li data-action="change">click me 2</li>
	<li data-action="change">click me 3</li>
	<li data-action="change">click me 4</li>
	<li data-action="change">click me 5</li>
	<li data-action="change">click me 6</li>
	<li data-action="change">click me 7</li>
</ul>
<div id="test"></div>

CSS

li {
	padding: 10px;
	cursor: pointer;
}
.test {
	color: #fff;
	background: #369;
}

JavaScript

var observeObject = function () {
	var _class = {
		init: function (selector, callback) {
			var element = document.querySelector(selector);

			try {
				var observer = new MutationObserver(function (mutations) {
						mutations.forEach(function (mutation) {
							callback(mutation.target, mutation.attributeName, mutation.oldValue);
						});		
					});

				observer.observe(element, {
					attributes: true,
					subtree: true,
					attributeOldValue: true
				});
			} catch (z) {
				element.addEventListener('DOMAttrModified', function (e) {
					callback(e.target, e.attrName, e.prevValue);
				}, false);
			}
		}
	};

	return _class;
}();



$(function () {
	observeObject.init('[data-container="change"]', function (target, name, oldValue) {
		$('#test').text($(target).text() + ' : ' + name + ' : ' + oldValue);
	});
});

$(document).on('click', '[data-action="change"]', function (e) {
	$(this).toggleClass('test');
});