Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.02.2020, 16:04
Новичок на форуме
Отправить личное сообщение для Mutex Посмотреть профиль Найти все сообщения от Mutex
 
Регистрация: 08.02.2020
Сообщений: 2

Не работают клики
Доброго всем времени суток!
Добавил выпадающий список, но никак не добавить событие Click к каждому элементу.
При клике по пунктам меню, ничего не происходит.
Подскажите как правильно добавить обработчик события?!

файл list_box_layout.js
ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 9,
            controls: []
        });

    var cityList = new ymaps.control.ListBox({
        data: {
            content: 'Select a city'
        },
        items: [
            //new ymaps.control.ListBoxItem('Москва'),
            //new ymaps.control.ListBoxItem('Новосибирск'),
            //new ymaps.control.ListBoxItem({options: {type: 'separator'}}),
            //new ymaps.control.ListBoxItem('Нью-Йорк')
        ]
        });

    // Перебираем все объекты коллекции buildings
    for(var i = 0; i < buildings.length; i++)
    {
        var itemCity = new ymaps.control.ListBoxItem(buildings[i].name);
        itemCity.events.add('click',function(){
            //myMap.setCenter([buildings[i].latitude,buildings[i].longitude]);
            alert(buildings[i].name);
        });
        cityList.add(itemCity);
    }
        /*
    cityList.get(0)
        .events.add('click', function () {
            myMap.setCenter([55.752736, 37.606815]);
        });
    cityList.get(1)
        .events.add('click', function () {
            myMap.setCenter([55.026366, 82.907803]);
        });
    cityList.get(3)
        .events.add('click', function () {
            myMap.setCenter([40.695537, -73.97552]);
        });
        */
    myMap.controls.add(cityList, {float: 'left'});
}

buildings.js
var buildings = [
	{latitude: 37.678514,longitude: 55.758255,name: 'Москва (Самокатная)', description:'Москва, ул. Самокатная, дом 1, строение 21'},
    {latitude: 37.587398,longitude: 55.734172,name: 'Москва (Парк культуры)', description:'Москва, ул. Тимура Фрунзе, 11 и ул. Льва Толстого, 16'},
	{latitude: 60.644555,longitude: 56.845209,name: 'Екатеринбург', description:'Екатеринбург, ул. Гагарина, 8, офис 602'},
	{latitude: 30.406127143,longitude: 59.9590655815,name: 'Санкт-Петербург', description:'Санкт-Петербург, Cвердловская набережная, дом 44, бизнес-центр «Бенуа» (4-6 эт.)'},
    {latitude: 30.749512,longitude: 46.459542,name: 'Одесса', description:'Одесса, пр. Шевченко, дом 4-Д, офис 61'},
    {latitude: 30.598379,longitude: 50.45332,name: 'Киев', description:'Киев, ул. Луначарского, 4'},
    {latitude: 34.095482,longitude: 44.949507,name: 'Симферополь',description: 'Симферополь, ул. Героев Аджимушкая, 6/13, второй этаж'},
    {latitude:-122.348557,longitude: 37.578894,name: 'Burlingame',description: '3d floor, Suite 306, 330 Primrose Road Burlingame, CA 94010'}
];

list_box_layout.html
Код:
<!DOCTYPE html>

<html>

<head>
    <title>Произвольный макет выпадающего списка</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
    <script src="https://yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>
    <script src="list_box_layout.js" type="text/javascript"></script>
    <script src ="buildings.js" type="text/javascript"></script>
    <link href="https://yandex.st/bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">
	<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }

        #my-listbox {
            top: auto;
            left: auto;
        }
    </style>
</head>

<body>
    <div id="map"></div>
</body>

</html>
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2020, 16:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Mutex,
for(var i = 0; i < buildings.length; i++)
let
Ответить с цитированием
  #3 (permalink)  
Старый 08.02.2020, 19:19
Новичок на форуме
Отправить личное сообщение для Mutex Посмотреть профиль Найти все сообщения от Mutex
 
Регистрация: 08.02.2020
Сообщений: 2

Почему надо так?
Можешь пояснить почему так?
Ведь в коде всего одна переменная i, в чём была проблема?
Ответить с цитированием
  #4 (permalink)  
Старый 08.02.2020, 19:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Mutex
Можешь пояснить почему так?
Сообщение от Mutex
Ведь в коде всего одна переменная i,
а вам нужна не одна , а сколько в массиве элементов.
var будет хранить последнее значение равное length, таких элементов не бывает.
нужно использовать или let или forEach вместо for.
Ответить с цитированием
  #5 (permalink)  
Старый 08.02.2020, 19:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Mutex
Можешь пояснить почему так?
https://javascript.ru/forum/misc/792...tml#post518920
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему CSS работают на сайте CODEPEN.IO, а на моем сайте не работают? mikhail apalaev Элементы интерфейса 3 26.01.2020 03:35
для экстрасенсов-не работают скрипты гуня Элементы интерфейса 4 21.01.2019 16:19
Внутри разворачивающегося по клику DIVа не работают ссылки JavaScriptNoob Элементы интерфейса 2 17.11.2015 00:01
Не работают селекторы jQuery iBars jQuery 11 26.03.2015 22:05
Не работают два JS скрипта вместе на одной странице 5art@mail.ru Events/DOM/Window 44 15.07.2012 18:51