Как упростить этот JS код?

Question

[Сергей Горячев]

У меня есть куча area с data атрибутами.

<area shape="poly" coords="511,133,511,152,509,152,506,152,506,215,506,278,529,278,552,278,552,297,552,316,568,316,583,316,583,398,583,479,621,479,658,479,658,316,658,152,656,152,654,152,654,133,654,114,583,114,511,114" id="flat-0" class="flat-section" data-flat-number="123" data-flat-roomamount="2" data-flat-square="150,55">

Из атрибутов data получаются значения:

var flatNumber = $('#flat-0').data('flatNumber');
var flatRoomamount = $('#flat-0').data('flatRoomamount');
var flatSquare = $('#flat-0').data('flatSquare');

Потом эти данные передаются в div:

$('#flat-number-0').text(flatNumber);
$('#flat-roomamount-0').text(flatRoomamount);
$('#flat-square-0').text(flatSquare);

При наведении на area #flat-0 должен показываться блок .

$('#flat-0').mousemove(function(e){ $('#flat-info-0').css({ display:"block" }); });
$('#flat-0').mouseout(function(){ $('#flat-info-0').css({ display:"none" }); });

Сейчас у меня 7 area и для каждого #flat-1, #flat-2, #flat-3... #flat-7 весь код прописывается ручками.

<div id="flat-info-0" class="flat_mini_info">
   <div class="number">
      <span>№ квартиры</span>
      <span id="flat-number-0"></span>
   </div>
   <div class="roomamount">
      <span>Количество комнат</span>
      <span id="flat-roomamount-0"></span>
   </div>
   <div class="square">
      <span>Площадь, м<sup>2</sup></span>
      <span id="flat-square-0"></span>
   </div>
</div>

Как правильно упростить этот код?
Понимаю, что это капец)))

Answer 1

[Алексей Зуев]

codepen.io/anon/pen/qOGvyz

Comments

[Сергей Горячев]

Капец, как всё просто оказывается...

Answer 2

[Ernest Faizullin]

примерно так

var Flat = function(id) {

	this.$flat = $('#flat-'+id);

	this.flatNumber = this.$flat.data('flatNumber');
	this.flatRoomamount = this.$flat.data('flatRoomamount');
	this.flatSquare = this.$flat.data('flatSquare');

	$('#flat-number'+id).text(this.flatNumber);
	$('#flat-roomamount'+id).text(this.flatRoomamount);
	$('#flat-square'+id).text(this.flatSquare);

	this.$flat.hover(function() {
		$('#flat-info'+id).css({ display:"block" });
	}, function() {
		$('#flat-info'+id).css({ display:"none" });
	});
}


jQuery(document).ready(function($) {
	
	$('.flat-section').each(function(index, el) {
		new Flat(index);
	});
});

тут подробнее Функции-конструкторы