Javascript 如何通过使用传单单击按钮来更改标记的图标?
我有一张有几个记号的地图。每个标记都有一个带有3个按钮的信息窗口,如下所示: 单击每个按钮都会更改标记的图标。但是,当我打开一个标记的信息窗口,不单击任何按钮,然后转到另一个标记并单击其中一个按钮时,两个标记都会更改图标,而不是仅更改最后一个剪辑的图标。 这是我的密码:Javascript 如何通过使用传单单击按钮来更改标记的图标?,javascript,leaflet,markers,Javascript,Leaflet,Markers,我有一张有几个记号的地图。每个标记都有一个带有3个按钮的信息窗口,如下所示: 单击每个按钮都会更改标记的图标。但是,当我打开一个标记的信息窗口,不单击任何按钮,然后转到另一个标记并单击其中一个按钮时,两个标记都会更改图标,而不是仅更改最后一个剪辑的图标。 这是我的密码: //Get de todas as ignições presentes na base de dados $.get("/api/IgnicoesAPI", function (data) { //a
//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
我应该如何解决这个问题?这是一个过于急切地添加和附加事件处理程序的问题,这最终会使事件处理程序的运行次数超出您的预期
在每次单击标记时都会附加jQuery事件处理程序,因此如果您有如下代码
var marker = new L.marker(/* stuff */).on("click", function onClick(ev) {
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
});
…然后单击一个标记,比如说10次,其效果与附加jQuery单击标记10次相同:
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
所以,如果您单击该按钮一次,代码将运行10次
您会感到困惑,因为id
存在于循环的范围内,而jQuery click handler函数是在所述循环中定义的。因此,如果我们假设您有ID为4和5的项目,并且您在代码中的每个项目的每个标记上单击一次,如下所示
$。每个(数据、功能(i、项){
var id=item.id
var marker = new L.marker(/* stuff */).on("click", function onClick(ev) {
$(document).on("click", "#aceite", function () {
console.log('running click handler with ID', id);
});
});
…这相当于附加两个不同的单击事件处理程序,每个处理程序的值不同(因为它们位于不同的位置):
所以,如果您单击该按钮一次,代码将运行两次
除非您确实确定自己在做什么(即跟踪有多少个事件处理程序附加到一个事件,并根据需要将其分离),否则请避免在循环和其他事件处理程序内附加事件处理程序
所以不是
data.forEach(function (item, i) {
var id = item.id;
L.marker(item.latlng).on('click', function(ev) {
$("#button").on('click', function() {
console.log('Doing stuff for item', id);
});
});
});
…您应该尝试让应该运行一次的东西(即附加jQuery事件处理程序)运行一次,并将任何需要的状态提升到一个公共范围,例如
// 'id' exists out of the scope of any functions defined inside the loop,
// so it ""exists only once"" to the eyes of those functions
var id;
data.forEach(function (item, i) {
L.marker(item.latlng).on('click', function(ev) {
// Since the marker click handler function is defined within a loop,
// and the scope of 'item' is that of the loop, it forms a closure,
// which means it's ""unique"" to each of the marker click handler
// functions.
// By contrast, 'id' is defined outside of that scope, so it's
// ""common"" to all of the marker click handler functions
id = item.id;
});
});
// Attach the jQuery event handler **once**, and do not wait
// until clicking on a marker to do so.
$("#button").on('click', function() {
console.log('Doing stuff for item', id);
});
请仔细阅读。真的。这是一个过于急切地附加事件处理程序的问题,这最终会使事件处理程序的运行次数超出您的预期
在每次单击标记时都会附加jQuery事件处理程序,因此如果您有如下代码
var marker = new L.marker(/* stuff */).on("click", function onClick(ev) {
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
});
…然后单击一个标记,比如说10次,其效果与附加jQuery单击标记10次相同:
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
$(document).on("click", "#aceite", function () {
console.log('running click handler');
});
所以,如果您单击该按钮一次,代码将运行10次
您会感到困惑,因为id
存在于循环的范围内,而jQuery click handler函数是在所述循环中定义的。因此,如果我们假设您有id为4和5的项,并且您在代码上的每个项的每个标记上单击一次,就像这样
$。每个(数据、功能(i、项){
var id=item.id
var marker = new L.marker(/* stuff */).on("click", function onClick(ev) {
$(document).on("click", "#aceite", function () {
console.log('running click handler with ID', id);
});
});
…这相当于附加两个不同的单击事件处理程序,每个处理程序的值不同(因为它们位于不同的位置):
所以,如果您单击该按钮一次,代码将运行两次
除非您确实确定自己在做什么(即跟踪有多少个事件处理程序附加到一个事件,并根据需要将其分离),否则请避免在循环和其他事件处理程序内附加事件处理程序
所以不是
data.forEach(function (item, i) {
var id = item.id;
L.marker(item.latlng).on('click', function(ev) {
$("#button").on('click', function() {
console.log('Doing stuff for item', id);
});
});
});
…您应该尝试让应该运行一次的东西(即附加jQuery事件处理程序)运行一次,并将任何需要的状态提升到一个公共范围,例如
// 'id' exists out of the scope of any functions defined inside the loop,
// so it ""exists only once"" to the eyes of those functions
var id;
data.forEach(function (item, i) {
L.marker(item.latlng).on('click', function(ev) {
// Since the marker click handler function is defined within a loop,
// and the scope of 'item' is that of the loop, it forms a closure,
// which means it's ""unique"" to each of the marker click handler
// functions.
// By contrast, 'id' is defined outside of that scope, so it's
// ""common"" to all of the marker click handler functions
id = item.id;
});
});
// Attach the jQuery event handler **once**, and do not wait
// until clicking on a marker to do so.
$("#button").on('click', function() {
console.log('Doing stuff for item', id);
});
请仔细阅读。真的。你正在做的
点击Marker.setIcon(结束)
。检查clickedmarker
是否具有您期望的值,并检查Concluted
是否是您想要的L.Icon
的存在。我的问题是clickedmarker存储了多个项目。单击另一个标记后,我需要将clickedmarker设置为空。但我不知道如何做不,clickedmarker
只有一个项,但在标记器单击时,它会被重新分配到e.target
。我看到的一个潜在问题是,每次标记器单击时,jQuery事件处理程序都会被重新附加,因此单击模式按钮可能会多次运行代码。在marker
和e.target
上都有隐式标记,因此每次运行这些标记时y使用不同的值运行。我会尝试将jQuery事件处理程序代码提升到数据的循环之外,以及传单标记单击的事件处理程序之外。我想我发现了问题。我编辑了我的问题,以便您能够理解我要找的内容。我相信我的问题在于我有一个名为Atalizard whic的函数h负责更改图标。该函数使用每个标记的id,我可以看到我的id变量返回两个id(一个先单击,然后是第二个)。我不知道它是否有意义。您正在执行clickedmarker.setIcon(结束)
。检查clickedmarker
是否具有您期望的值,并检查Concluted
是否是您想要的L.Icon
的存在。我的问题是clickedmarker存储了多个项目。单击另一个标记后,我需要将clickedmarker设置为空。但我不知道如何做不,clickedmarker
只有一个项,但在标记器单击时,它会被重新分配到e.target
。我看到的一个潜在问题是,每次标记器单击时,jQuery事件处理程序都会被重新附加,因此单击模式按钮可能会多次运行代码。在marker
和e.target
上都有隐式标记,因此每次运行这些标记时y使用不同的值运行。我会尝试将jQuery事件处理程序代码提升到数据的循环之外,以及传单标记单击的事件处理程序之外。我想我发现了问题。我编辑了我的问题,以便您能够理解我要找的内容。我相信我的问题在于我有一个名为Atalizard whic的函数h负责更改图标。这是我们的职责