Question

页面上有很多复选框。这些复选框用于通过Javascript函数切换图层的可见性。

<input type="checkbox" id="op_checkbox_0">Aerial<br>
<input type="checkbox" id="op_checkbox_1">Aerial (Labels)<br>
<input type="checkbox" id="op_checkbox_2">Road<br>
<input type="checkbox" id="op_checkbox_3">Road On Demand<br>
<input type="checkbox" id="op_checkbox_4">OSM Layer<br>
<input type="checkbox" id="op_checkbox_5">WMS Layer<br>

我有一个事件监听器用于每个复选框来检查的变化，并且如果发生改变，则toggleOpacity(value, el_id)函数被调用，其需要两个参数，value - 复选框号/层位置在mapLayers数组中，以及el_id-复选框ID。

document.addEventListener("DOMContentLoaded", function (event) {
  document.querySelector('#op_checkbox_0').addEventListener('change', toggleOpacity(0,'op_checkbox_0'));
  document.querySelector('#op_checkbox_1').addEventListener('change', toggleOpacity(1,'op_checkbox_1'));
  document.querySelector('#op_checkbox_2').addEventListener('change', toggleOpacity(2,'op_checkbox_2'));
  document.querySelector('#op_checkbox_3').addEventListener('change', toggleOpacity(3,'op_checkbox_3'));
  document.querySelector('#op_checkbox_4').addEventListener('change', toggleOpacity(4,'op_checkbox_4'));
  document.querySelector('#op_checkbox_5').addEventListener('change', toggleOpacity(5,'op_checkbox_5'));
});

该功能通过更改不透明度来切换图层的可见性。它还将Z值1和所有其他层的值都指定为0，以便最后切换的层将位于顶部（可见）。 mapLayers.length等于6，与复选框的数量相同。

function toggleOpacity(value, el_id){
    console.log('value='+value+' id='+el_id);
    if(document.getElementById(el_id).checked == true){
        console.log('true');
        for(let i = 0; i<mapLayers.length;i++){
        mapLayers[i].set('zIndex', 0);
        }
        mapLayers[value].set('opacity', 1);     
        mapLayers[value].set('zIndex', 1);
        console.log('Box ' + value + 'on!');
    } else if(document.getElementById(el_id).checked == false) {
        console.log('false');;
        mapLayers[value].set('opacity', 0);
    }
}

mapLayers是OpenLayers映射的图层阵列。每个位置对应一个不同的层。切换复选框时，该功能似乎没有启动，我也不知道为什么。

Answer 1

您没有添加事件，而是在调用它。

所以改变

  document.querySelector('#op_checkbox_0').addEventListener('change', toggleOpacity(0,'op_checkbox_0'));

收件人

  document.querySelector('#op_checkbox_0').addEventListener('change', ()=> toggleOpacity(0,'op_checkbox_0'));

document.addEventListener("DOMContentLoaded", function (event) {
  document.querySelector('#op_checkbox_0').addEventListener('change', ()=> toggleOpacity(0,'op_checkbox_0'));
  document.querySelector('#op_checkbox_1').addEventListener('change', ()=> toggleOpacity(1,'op_checkbox_1'));
  document.querySelector('#op_checkbox_2').addEventListener('change', ()=> toggleOpacity(2,'op_checkbox_2'));
  document.querySelector('#op_checkbox_3').addEventListener('change', ()=> toggleOpacity(3,'op_checkbox_3'));
  document.querySelector('#op_checkbox_4').addEventListener('change', ()=> toggleOpacity(4,'op_checkbox_4'));
  document.querySelector('#op_checkbox_5').addEventListener('change', ()=> toggleOpacity(5,'op_checkbox_5'));
});

function toggleOpacity(value, el_id){
   console.log(el_id + "changed")
}

<input type="checkbox" id="op_checkbox_0">Aerial<br>
<input type="checkbox" id="op_checkbox_1">Aerial (Labels)<br>
<input type="checkbox" id="op_checkbox_2">Road<br>
<input type="checkbox" id="op_checkbox_3">Road On Demand<br>
<input type="checkbox" id="op_checkbox_4">OSM Layer<br>
<input type="checkbox" id="op_checkbox_5">WMS Layer<br>

Answer 2

实际上，在代码中，您没有将function作为第二个参数传递给addEventListener。 toggleOpacity(value, el_id)将返回一个值，并将其设置为变量undefined，而不是toggleOpacity

document.querySelector('#op_checkbox_0').addEventListener('change', ()=>{
        toggleOpacity(0,'op_checkbox_0'));
  }

Answer 3

因为您正在呼叫toggleOpacity(value, el_id)，但它不会返回任何内容。因此，您将undefined作为回调传递给addEventListener。尝试这样：

document.querySelector('#op_checkbox_0').addEventListener('change', (event)=>{ 
   toggleOpacity(0,'op_checkbox_0');
});

您需要传递一个函数。如果调用该函数，则传递该函数的返回值。

Answer 4

尝试：

  document.querySelector('#op_checkbox_0').addEventListener('change', function() {
        toggleOpacity(0,'op_checkbox_0')
  });

类似地，对于其他所有听众

复选框事件监听器未触发

4 个答案: