JSFiddle - React, Tailwind, and code Playground

by defmetalhead

HTML

<ul class="menu">
	<li class="a">First</li>
	<li class="b">Second</li>
	<li class="c">Third</li>
	<li class="d">Fourth</li>
	<li class="e">Fifth</li>
</ul>

CSS

ul {
	list-style-type: none;
}
ul li {
	display: inline-block;
	cursor: pointer;
	margin: 0 20px 0 0;
	background: lightgreen;
}

JavaScript

$(function() {
    var a = 1;
	var b = 2;
	var c = 3;
	var d = 4;
	var e = 5;
	$('.menu li').on('click', function() {
		var liClass = $(this).attr('class');
		console.log(liClass);
		var someObject = {
			"a": a,
			"b": b,
			"c": c,
			"d": d,
			"e": e
		}
		console.log(someObject.a);        //THIS WORKS FINE
	    console.log(someObject.liClass); //WHY DOESNT THIS WORK
    });
});