JSFiddle - React, Tailwind, and code Playground

by iambriansreed

HTML

<pre>No hovers...</pre>

<div id="quarter_circle_top_left">...</div>
<div id="quarter_circle_top_right">...</div>
<div id="quarter_circle_bottom_right">...</div>
<div id="quarter_circle_bottom_left">...</div>    

<div id="author_dimension">x</div>
<div id="similar_dimension">x</div>
<div id="citation_dimension">x</div>
<div id="concept_dimension">x</div>

CSS

.hover {
    background: #f00;
}

JavaScript

var DIMENSIONS = {
    DIM_AUTHORS: {value: 1, dimCode: "author_dimension", areaCode: "quarter_circle_top_left"},
    DIM_SIMILAR: {value: 2, dimCode: "similar_dimension", areaCode: "quarter_circle_top_right"},
    DIM_CITATIONS: {value: 3, dimCode: "citation_dimension", areaCode: "quarter_circle_bottom_right"},
    DIM_CONCEPTS: {value: 4, dimCode: "concept_dimension", areaCode: "quarter_circle_bottom_left"}
};

$.each(DIMENSIONS, function(key, value) {
    $("#" + value.dimCode)
    .hover(function() {
        $('pre').text('hover on: '+value.areaCode);
        $("#" + value.areaCode).addClass("hover");
    },function() {
        $('pre').text('hover off: '+value.areaCode);        
        $("#" + value.areaCode).removeClass("hover");
    });
});


/*

ugly:

for (key in DIMENSIONS) {
    if(!DIMENSIONS.hasOwnProperty(key)) continue;  
    
    $("#" + DIMENSIONS[key].dimCode)
    .data('areaCode', DIMENSIONS[key].areaCode)
    .hover(function() {
        $('pre').text('hover on: '+$(this).data('areaCode'));
        $("#" + $(this).data('areaCode')).addClass("hover");
    },function() {
        $('pre').text('hover off: '+$(this).data('areaCode'));        
        $("#" + $(this).data('areaCode')).removeClass("hover");
    });
}

*/