JSFiddle - React, Tailwind, and code Playground

by sujay

HTML

<div id="nav">
<ul>
    <li><a>Test 1</a></li>
    <li><a>Test 2</a></li>
    <li><a>Test 3</a></li>
    <li><a>Test 4</a></li>
    <li><a>Test 5</a></li>
</ul>
</div>

CSS

a.over {
    color: red;
}

JavaScript

navModule = (function() {
    var nav = {};
    var navHTMLobjs = {
        navList: $('#nav'),
        listItems: $('#nav').find('li'),
        listLinks: $('#nav').find('a')
    };
    nav.bindOver = function() {
        navHTMLobjs.navList.on('mouseover mouseout', 'li a', function(e) {
            if (e.type == 'mouseover') {
                $(this).addClass('over');
            }
            if (e.type == 'mouseout') {
                $(this).removeClass('over');
            }
        });
    };
    nav.isOverBinded = function() {
        return navHTMLobjs.navList.data('events').hasOwnProperty('mouseover') && navHTMLobjs.navList.data('events').hasOwnProperty('mouseout');
    };
    nav.turnOff = function() {
        navHTMLobjs.navList.off('mouseover mouseout');
    };
    nav.isNavTurnedOff = function() {
        return !navHTMLobjs.navList.data.hasOwnProperty('events');
    };
    nav.init = function() {
        this.bindOver();
    };
    return nav;
});

//var myNav = new navModule($('#nav'));
//myNav.init();
// So I want to only include this array which will be written by 
//back end and each page will only have its required bits.
var pageModules = ['navModule'];
for (var m in pageModules) {
    var fn = window[pageModules[m]];
    //var fn = Function(pageModules[m]); This says navModule is not defined :(
    if (typeof fn === 'function') {
        var inner = new fn();
        inner.init();
    }
}