Флажок в javaScript

180
03 января 2019, 14:00

Я начинающий javaScript разработчик, поэтому прошу не пинать строго за данный вопрос. Имеется следующий javaScript код:

window.onload = function () {

    var $ = function (id) {
          return document.getElementById(id)
       }

    var button = document.querySelectorAll ('input[type=button]')
    button[0].addEventListener('click', function () {
       var pos = $('address1');
       var maps = $('map1');
       var hotel = $ ("hotel1");
       var btn = button[0];
       showPosition(pos, maps, hotel, btn);
});
    button[1].addEventListener('click', function () {
       var pos = $('address2');
       var maps = $('map2');
       var hotel = $ ("hotel2");
       var btn = button[1];
       showPosition(pos, maps, hotel, btn);
});
    button[2].addEventListener('click', function () {
       var pos = $('address3');
       var maps = $('map3');
       var hotel = $ ("hotel3");
       var btn = button[2];
       showPosition(pos, maps, hotel, btn);
});
    button[3].addEventListener('click', function () {
       var pos = $('address4');
       var maps = $('map4');
       var hotel = $ ("hotel4");
       var btn = button[3];
       showPosition(pos, maps, hotel, btn);
});
var flag = true;
function showPosition(pos, maps, hotel, btn) {
       if (flag == true){
       var address = pos.textContent;
       if (address) {
               // используем API Google Maps для геокодирования адреса
               // настраиваем объект Geocoder
               var geocoder = new google.maps.Geocoder();
               // возвращаем координаты с помощью функции geocode
               geocoder.geocode({ 'address': address }, function (results, status) {
                   if (status == google.maps.GeocoderStatus.OK) {
                       if (results[0]) {
                              var lat = results[0].geometry.location.lat();
                               var long = results[0].geometry.location.lng();
                               var position = new google.maps.LatLng(lat, long);

           // параметры для карты.
               var options = {
                   zoom: 15,
                   center: position, // позиция расположения на карте
                   mapTypeId: google.maps.MapTypeId.ROADMAP // тип карты - ROADMAP, SATELLITE, HYBRID and TERRAIN
                               };
           // объект карты.
           var map = new google.maps.Map(maps,options);
           // маркер
           var marker = new google.maps.Marker({
           position: position,
           map: map,
       });
                   var infowindow = new google.maps.InfoWindow({
           content: hotel
       });
    // присвоение обработчика на нажатие по маркеру.
       google.maps.event.addListener(marker, 'click', function () {
           infowindow.open(map, marker);
       });
       //делаем блок с картой видимым
           maps.style.visibility = "visible";
           maps.style.display = "block";
           maps.style.height = "200px";
           maps.style.width = "100%";
                       }

                        else {
                           error('Google не возвратил результатов.');
                       }
                   } else {
                       error("Геокодирование завершилось ошибкой - " + status);
                   }
               });
               // меняем значение кнопки и флага
               btn.value = "Скрыть карту"
               flag = false;
           }    
           }
           else {
               var map = "";
               maps.style.visibility = "hidden";
               maps.style.display = "none";
               btn.value = "Посмотреть местоположение на карте";
               flag = true;
           }
           }

           }

Проблема в флажке - переключателе var flag. При данном коде на странице, когда я нажимаю, например, на кнопку 1 переменная flag становится false не только для кнопки 1, но и для всех остальных кнопок. В результате этого при нажатии например, на кнопку 2 сразу после нажатия один раз на кнопку 1 (или на любую другую кнопку), чтобы сработала задача "посмотреть местоположение на карте" я вынужден щёлкать дважды, т.к. после нажатия на любую другую кнопку первый раз flag принимает значение false для всех кнопок. А хотелось бы разделить значение переменной flag для каждой кнопки отдельно, но как это сделать, без дублирования одной и той же функции несколько раз я, к сожалению, понять не могу. Заранее спасибо за помощь!

Answer 1

Привяжите флаги к кнопкам.

for (var i = 0; i < button.length; i++) {
  button[i].dataset.flag = true;
  button[i].addEventListener('click', (function(index) {
    return function() {
      var pos = $('address' + (index + 1));
      var maps = $('map' + (index + 1));
      var hotel = $("hotel" + (index + 1));
      showPosition(pos, maps, hotel, this);
    };
  })(i));
}
function showPosition(pos, maps, hotel, btn) {
  if (btn.dataset.flag) {
    ...
  } else {
    ...
  }
  btn.dataset.flag = !btn.dataset.flag;
}
READ ALSO
Получение js объекта из строки

Получение js объекта из строки

Есть файлjs такого вида

173
Объединить 2 MediaStreamAudioSourceNode на JS

Объединить 2 MediaStreamAudioSourceNode на JS

Есть звонилка на webRTCТребуется записывать разговоры средствами JS

170
Ввод цифры в alert

Ввод цифры в alert

Можно ли сделать так, чтобы когда пользователь вводил в prompt цифру 1 то ему показывалась картинка с информациейЕсли бы он вводил цифру 2, то ему...

175
Сбор данных из множественных полей

Сбор данных из множественных полей

Нужно собрать данные пользователя в post, как реализовать сбор полей email и phone если они множественные? Как собрать данные с inputов, если есть поля...

180