Удаление всплывающих окон, определенных в других функциях прослушивания событий

Question

Открывается функция прослушивателя событий i Число всплывающих окон по длине переменной codedCities, которая динамически изменяется. Эта функция работает отлично, но проблема заключается в удалении всплывающих окон. На 'mouseout' Мне бы хотелось, чтобы все всплывающие окна открылись в 'mouseover', чтобы закрыть.

item.addEventListener('mouseover', function() { 

      for (var i in codedCities) { 

var popupB = new mapboxgl.Popup({ 
       offset: [0, -10], 
       closeButton: false, 
       closeOnClick: true, 
       anchor: 'top-left' 
      }); 

       popupB.setLngLat(codedCities[i].geometry.coordinates) 
       .setHTML('<div>' + codedCities[i].properties.city + '</div>') 
       .addTo(map); 

     } 

    }); 

С MapBox GL, новый mapboxgl.Popup экземпляр много будет создан для каждой функции, что означает, что такое же количество всплывающих окон должны быть удалены. До сих пор я пытался:

item.addEventListener('mouseout', function() { 

     if (popupB){ 
      popupB.remove(); 
     } else { 
      console.log("no more popups!") 
     } 
    }); 

Но это не сработало, потому что popupB локальная переменная, определенная в предыдущей функции. Затем я попытался определить popupB как глобальную переменную в предыдущей функции с window.popupB, но тогда только один экземпляр popupB удален, а не все из них. Затем я попытался добавить ряд [I] к имени переменной всплывающей и цикл через все всплывающие окна с window["popup" + i] = new mapboxgl.Popup

 item.addEventListener('mouseout', function() { 

     var step; 
     for (step = 0; step < codedCities.length ; step++) {  
     window["popup" + step].remove(); 

      } 
     }); 

Но это не показывает ничего. Мне интересно, есть ли известная обходная проблема для этой проблемы.

Как определить и создать всплывающие окна в функции mouseover, а затем удалить те же самые всплывающие окна в функции mouseout?

Есть ли способ включить то, что я хочу в mouseout в пределахmouseover функция?

Answer 1

Вы можете добавить общий класс css во всплывающие окна и на mouseout, просто нацелите объект на этот класс css и закройте их.