javascript函数循环调用答案

【问题标题】：javascript function calling in loopjavascript函数循环调用
【发布时间】：2022-09-27 15:39:58
【问题描述】：

我正在使用 Leaflet.js 制作地图。

我做了一个功能，用户选择一个国家，它会生成带有特定信息的简单按钮。

问题是当我一个接一个地选择一个国家时，它会创建更多的easybuttons并且不会删除以前创建的按钮。

请检查图像，以便您了解问题所在。

function generateList() {
    const list = document.querySelector(\'.dropdown-content\');
    
    countryList.sort(function (a, b) {
      if (a.properties.country < b.properties.country) {
        return -1;
      }
      if (a.properties.country > b.properties.country) {
        return 1;
      }
      return 0;
    });
    
    countryList.forEach((country) => {
      
      
      const a=document.createElement(\'a\');
      const p=document.createElement(\'p\');
      
      
      //flying to the country on user click on country
      a.addEventListener(\'click\', () => {
        
          flyToStore(country);
          const city=country.properties.city;
          const currency1=country.properties.currency;
          const contry=country.properties.country;
          
          L.easyButton(\'fa-solid fa-cloud fa-lg\',function (){
           weatherdetails(city);
           $(\'#weathermodal\').modal(\'show\');
        
        }).addTo(myMap);
        L.easyButton(\'fa fa-dollar fa-lg\',function (){
            currencyexchange(currency1);
            $(\'#myModal\').modal(\'show\');
         
         }).addTo(myMap);
         L.easyButton(\'fa fa-info-circle fa-lg\',function (){
            moredetails(contry);
            $(\'#detailsmodal\').modal(\'show\');
         
         }).addTo(myMap);
         
      });
      
      
      a.classList.add(\'country-item\');
      
      countries=country.properties.country;
      a.innerText =countries ;
     
      
      
      
  
      //div.appendChild(p);
      
    list.appendChild(p);
    p.appendChild(a);
      
    });

}

您将不得不实际删除旧按钮，它不会神奇地发生在您身上..
这就是我要问的问题，每次单击新国家/地区时如何删除旧按钮？
这是一个可能的解决方案Leaflet remove easybuttonmap.removeControl(backButton);

标签： javascript leaflet

【解决方案1】：

我认为您需要保留对该按钮实例的引用。然后打电话给你的地图removeControl它。

function generateList() {
    const list = document.querySelector('.dropdown-content');

    countryList.sort(function (a, b) {
        if (a.properties.country < b.properties.country) {
            return -1;
        }
        if (a.properties.country > b.properties.country) {
            return 1;
        }
        return 0;
    });

    lastButton1 = null;
    lastButton2 = null;
    lastButton3 = null;

    countryList.forEach((country) => {

        const a = document.createElement('a');
        const p = document.createElement('p');

        //flying to the country on user click on country
        a.addEventListener('click', () => {
            if (lastButton1) {
                myMap.removeControl(lastButton1);
                myMap.removeControl(lastButton2);
                myMap.removeControl(lastButton3);
                lastButton1 = null
            }

            flyToStore(country);
            const city = country.properties.city;
            const currency1 = country.properties.currency;
            const contry = country.properties.country;

            lastButton1 = L.easyButton('fa-solid fa-cloud fa-lg', function () {
                weatherdetails(city);
                $('#weathermodal').modal('show');
            })
            lastButton2 = L.easyButton('fa fa-dollar fa-lg', function () {
                currencyexchange(currency1);
                $('#myModal').modal('show');
            })
            lastButton3 = L.easyButton('fa fa-info-circle fa-lg', function () {
                moredetails(contry);
                $('#detailsmodal').modal('show');
            })

            lastButton1.addTo(myMap);
            lastButton2.addTo(myMap);
            lastButton3.addTo(myMap);

        });

        a.classList.add('country-item');

        countries = country.properties.country;
        a.innerText = countries;

        //div.appendChild(p);

        list.appendChild(p);
        p.appendChild(a);

    });

}

【讨论】：

谢谢，但我们只需要将 if 条件放在事件监听器中