时间戳

首页 > 解决方案 > 变量在javascript中存储两个值

javascript - 变量在javascript中存储两个值

问题描述

我有一张带有一些标记的地图。每个标记都有一个带有 3 个按钮的信息窗口。单击每个按钮时，都会更改标记的图标。但是，当我打开一个标记的信息窗口并且不单击任何按钮，然后转到另一个标记并单击其中一个按钮时，两个标记都会更改图标，而不是仅更改最后一个单击的图标。这是我的代码：

  //Get de todas as ignições presentes na base de dados
$.get("/api/IgnicoesAPI", function (data) {


    //alert(aceite)
    console.log(data);
 
    $.each(data, function (i, item) {

        //identificação do tipo de marcador que deve aparecer de acordo com o estado da ignição
        var ignicao;

       // MORE CODE

        var id = item.id;
     
        //colocar um marcador no mapa de acordo com a latitude e longitude fornecidas
        var marker = new L.marker([item.latitude, item.longitude], { icon: ignicao })

            .on("click", function onClick(e) {
              
                //assim que um marcador for clicado é mostrado o popup das ignições
                modal.style.display = "block";

                //indicação do marcador que foi clicado
                clickedmarker = e.target;
                console.log(clickedmarker);


                //vai buscar toda a informação correspondente ao id fornecido
                getData(id);

                //Actividade dos botões presentes no popup das ignições
                $(document).on("click", "#aceite", function () {
                    //se o estado for aceite, o botão respetivo estará desativado
                    if (item.estado == aceite) {
                        document.getElementById("aceite").disabled = true;
                        document.getElementById("recusado").disabled = false;
                        document.getElementById("concluido").disabled = false;

                    }
                    //se for clicado passará ao icon correspondente
                    else {
                        clickedmarker.setIcon(accepted);
                       //fecha o modal das avaliação da ignição
                        modal.style.display = "none";
                        //atualiza a base de dados com o novo estado
                        atualizaBD(id, Estado.aceite, item.latitude, item.longitude);
                    }


                });

                 $(document).on("click", "#concluido", function () {
                     //se o estado for concluido, o botão respetivo estará desativado
                     if (item.estado == concluido) {

                        document.getElementById("concluido").disabled = true;
                        document.getElementById("aceite").disabled = false;
                        document.getElementById("recusado").disabled = false;
                    }
                    //se for clicado passará ao icon correspondente
                     else {
                         
                         clickedmarker.setIcon(conclued);
                        //fecha o modal das avaliação da ignição
                         modal.style.display = "none";
                         
                         //atualiza a base de dados com o novo estado
                         atualizaBD(id, Estado.concluido, item.latitude, item.longitude);

                        
                        


                    }

                });
                
                $(document).on("click", "#recusado", function () {
                    //se o estado for recusado, o marcador será removido do mapa
                    //clickedmarker.removeFrom(map);
                   
                   
                    //map.removeLayer(clickedmarker)
                    
                    map.removeLayer(marker)
             

                    modal.style.display = "none";
                    //atualiza a base de dados com o novo estado
                    atualizaBD(id, Estado.recusado, item.latitude, item.longitude);

                   
                   
                    
                    
                });
        
            }).addTo(map);
       
        //adiciona marador ao mapa
        $('#json map').append(marker);


        if (item.estado == recusado) {
            map.removeLayer(marker)
        }

    });// fim each
});//fim do get

我相信我的问题是我有一个名为 atualizaBD 的函数，它负责更改图标。该函数使用每个标记的 id，从我可以看到我的 id 变量返回两个 Id（第一个单击，然后是第二个）。我不确定我的代码有什么问题，以及为什么变量 id 返回两个不同的 id。有人可以帮助我吗？

标签： javascript

解决方案

问题是这三个$(document).on("click"语句在每次标记单击时执行。这使得点击处理程序的数量每次都增加。之前的不会被删除。

相反，您应该在整段代码之外只执行这三个语句一次。但是，您还应该查看代码，以便您所做的变量引用在移动后仍然有效。

我无法判断您究竟需要更改什么，因为从您的代码中不清楚您在哪里定义了变量，如clickedmarker, aceite, concluido, Estado, ... 等，以及它们的范围是什么。但当然，您将不得不改变找出正确值的方式item和id。创建一个全局对象可能会很好，您可以在其中存储有关当前标记（id，...等）的信息。这样你就有了一个干净的、单一的对象，而不是一些松散的变量。

推荐阅读