Как поменять значение data-attribute?

Question

[Иван Иванов]

Здравствуйте, такая ситуация, есть такая разметка

<map name="simple" id="mapCoord">
	<area href="#" shape="poly" id="room-1" class="rectCoords" coords="16,65,162,65,162,315,198,315,198,390,161,390,161,687,16,687" alt="" data-maphilight="{&quot;strokeColor&quot;:&quot;ffde00&quot;,&quot;strokeWidth&quot;:3,&quot;fillOpacity&quot;:0,&quot;shadow&quot;:true,&quot;shadowPosition&quot;:&quot;outside&quot;,&quot;shadowRadius&quot;:20,&quot;shadowColor&quot;:&quot;000000&quot;,&quot;shadowX&quot;:0,&quot;shadowY&quot;:0,&quot;wrapClass&quot;:true,&quot;fade&quot;:false}" title="">
	<area href="#" shape="poly" id="room-2" class="rectCoords" coords="153,66,153,323,230,323,230,313,269,313,269,324,401,324,401,66,396,66,396,16,254,16,254,66"  alt="" data-maphilight="{&quot;strokeColor&quot;:&quot;ffde00&quot;,&quot;strokeWidth&quot;:3,&quot;fillOpacity&quot;:0,&quot;shadow&quot;:true,&quot;shadowPosition&quot;:&quot;outside&quot;,&quot;shadowRadius&quot;:20,&quot;shadowColor&quot;:&quot;000000&quot;,&quot;shadowX&quot;:0,&quot;shadowY&quot;:0,&quot;wrapClass&quot;:true,&quot;fade&quot;:false}" title="">
	<area href="#" shape="poly" id="room-3" class="rectCoords" coords="154,687,154,378,273,378,273,390,312,390,312,379,400,379,401,637,396,637,396,687"  alt="" data-maphilight="{&quot;strokeColor&quot;:&quot;ffde00&quot;,&quot;strokeWidth&quot;:3,&quot;fillOpacity&quot;:0,&quot;shadow&quot;:true,&quot;shadowPosition&quot;:&quot;outside&quot;,&quot;shadowRadius&quot;:20,&quot;shadowColor&quot;:&quot;000000&quot;,&quot;shadowX&quot;:0,&quot;shadowY&quot;:0,&quot;wrapClass&quot;:true,&quot;fade&quot;:false}" title="">
</map>

Необходимо при наведении поменять значение data-maphilight

Не могу понять как это сделать...

var map = document.getElementById('mapCoord'); // получаю нашу Карту
	var elems = map.getElementsByTagName('area'); // Создаю массив нужных нам элементом

 $('.rectCoords').mouseover(function(e) {
	for(var i=0; i<elems.length; i++){
	  $("#"+elems[i].id).attr('data-maphilight', '{&quot;strokeColor&quot;:&quot;000000&quot;}');
}

Но так не работает =( Подскажите где ошибка и как исправить

Comments

[дядя Фёдор]

Какое-то смутное ощущение, что ошибка в этой инструкции

$("#"+elems[i].id).attr('data-maphilight', '{"strokeColor":"000000"}');

Вы тут как будто получаете id элемента и этому id добавляете новое свойство, там оно и валяется наверное, если проалертить, это сразу стане ясно

Answer 1

[Stimulate]

$("#"+elems[i].id).data('maphilight', '{"strokeColor":"000000"}');

Answer 2

[Евгений Калибров]

Рабочий код:
https://jsfiddle.net/be3rr1L0/3/

Вам нужно отслеживать событие mouseover, а не вызывать его: $('.rectCoords').on('mouseover', function(e) {

Comments

[Иван Иванов]

Я новичок еще во всем этом, подскажите в чем кардинальное отличие? Между этим двумя способами? Буду очень признателен за науку!

[Евгений Калибров]

Иван Иванов, если помог, в благодарность можете отметить мой ответ решением. А разница в том, что так как вы писали - это искусственный вызов метода mouseover, а не подписка на него. Т.е. он один раз сработает и всё, дальше отслеживать событие уже не будет.