JSFiddle - React, Tailwind, and code Playground
HTML
<div id="defaltData" style="display: none">
<div class='RU-KGD'><span class='name'>Калининградская область</span><span class='imgName'>RU-KGD.png</span><span class='description'>3;5;7;2;1;4;7;9;9</span></div>
<div class='RU-NEN'><span class='name'>Ненецкий автономный округ</span><span class='imgName'>RU-NEN.png</span><span class='description'>1;4;7;3;5;9;5;1;7</span></div>
<div class='RU-ARK'><span class='name'>Архангельская область</span><span class='imgName'>RU-ARK.png</span><span class='description'>1;2;3;9;3;4;7;3;9</span></div>
<div class='RU-SPB'><span class='name'>Санкт-Петербург</span><span class='imgName'>RU-SPB.png</span><span class='description'>3;5;7;2;1;4;7;9;9</span></div>
<div class='RU-PSK'><span class='name'>Псковская область</span><span class='imgName'>RU-PSK.png</span><span class='description'>3;5;7;2;1;4;7;9;9</span></div>
<div class='RU-NGR'><span class='name'>Новгородская область</span><span class='imgName'>RU-NGR.png</span><span class='description'>3;5;7;2;1;4;7;9;9</span></div>
<div class='RU-MUR'><span class='name'>Мурманская область</span><span class='imgName'>RU-MUR.png</span><span class='description'>3;5;7;2;1;4;7;9;9</span></div>
<div class='RU-LEN'><span class='name'>Ленинградская область</span><span class='imgName'>RU-LEN.png</span><span class='description'>3;5;7;2;1;4;7;9;9</span></div>
<div class='RU-KO'><span class='name'>Республика Коми</span><span class='imgName'>RU-KO.png</span><span class='description'>3;5;7;2;1;4;7;9;9</span></div>
...
JavaScript
//Объявление объекта Карта
var Map = function () {
Map.activeRegion = null;
Map.colorMode = 'blye';
}
//Объявление объекта Область
var Area = function($dom) {
this.$ = $dom;
this.$.data('area',this);
this.code = this.getCode();
this.init();
};
//Объявление объекта Регион
var Region = function(code) {
this.code = code;
this.description = $('#defaltData').find('.' + this.code + ' .description').text().split(';');
this.name = $('#defaltData').find('.' + this.code + ' .name').text();
this.areas = [];
this.active = false;
};
//--------------------------------------------------------------------------
//Объявление обработчиков событий для объета Область
Area.prototype.handlers = {
onclick: function() {
var area = $(this).data('area');
area.getRegion().onclick();
return false;
},
hoverOn: function() {
var area = $(this).data('area');
area.getRegion().hoverOn();
},
hoverOff: function() {
Map.clear(false);
}
};
//--------------------------------------------------------------------------
//Добавление Областей в Регион
Region.instances = {};
Region.getByCode = function (code) {
if (!this.instances[code]) {
this.instances[code] = new Region(code);
}
return this.instances[code];
};
//--------------------------------------------------------------------------
//Инициализация обработчиков событий для объекта Регион
Area.prototype.init = function () {
this.$.click(this.handlers.onclick);
this.$.hover(this.handlers.hoverOn, this.handlers.hoverOff);
};
//--------------------------------------------------------------------------
//Методы объекта область
//-----
//Метод получения имени области
Area.prototype.getCode = function() {
return this.$.attr('class').replace('region ','').replace(' active', '');
};
//Метод получения Региона по Области
Area.prototype.getRegion = function() {
...