Клуб API Карт

Клуб API Карт

Как обратиться к конкретному элементу коллекции из вне?

Пост в архиве.

Здравствуйте!

Помогите решить следующую задачу.

Есть список html элементов.

<ul>
   <li><a href="" lat="50.42647" lng="30.563022" id="10">Element 1</a></li>
   <li><a href="" lat="50.45351" lng="30.516489" id="11">Element 2</a></li> 
</ul>

Я по ним пробегаюсь с помощью $('ul li').each(function(i) и отображаю на карте.
Задача: при наведении на html элемен менять стиль метки на карте.

6 комментариев
Авторизуйтесь, чтобы оставить комментарий
dimik
28 января 2016, 00:31

При переборе элементов списка вы создаете экземпляр класса метки и добавляете его на карту.

При этом можно навесить обработчик события наведения на данный элемент и в нем менять стиль метки.

То есть ссылки на метку и дом-элемент у вас есть, остается связать их внутри обработчика события

Fidgett
28 января 2016, 00:31

Пробовал так:
$('ul.result-mnu-list li').each(function(i){
  $(this).find('a').mouseenter(function() {
    placemark.options.set('preset', 'twirl#greenIcon');
  })
  .mouseleave(function() {
    placemark.options.set('preset', 'twirl#blueIcon');
  })
})

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

dimik
28 января 2016, 00:31

ну это логично, событие же не происходит в момент навешивания обработчика,

а placemark на что указывает?

Fidgett
28 января 2016, 00:31
ну это логично, событие же не происходит в момент навешивания обработчика,

А как тогда?
 

Введите текст цитаты

placemark = new ymaps.Placemark([$(this).attr('lat'), $(this).attr('lng')], { balloonContent: i });

dimik
28 января 2016, 00:31

У вас placemark это глобальная переменная, которая перезаписывается при каждой итерации цикла.

В результате каждый обработчик хранит ссылку на последний placemark

Глобальных переменных в коде быть не должно, кроме может быть одной единственной - неймспейса вашего приложения.

Fidgett
28 января 2016, 00:31

Все получилось.

 

Спасибо!