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

您可以在弹出窗口和 mouseout 上添加常用的css类，只需使用该css类定位目标对象并关闭它们。

删除在其他事件侦听器函数中定义的弹出窗口

1 个答案: