使用javascript管理动态生成的元素

时间:2012-10-16 15:29:14

标签: javascript html google-maps-api-3

我的代码可以根据特定条件在Google地图上生成标记。我正在尝试做的是在地图旁边生成一个列表,其中包含与列表中显示的每个标记关联的地址以及每个地址旁边的复选框。在此列表的底部将是一个“精炼”按钮,它只返回已选中复选框的结果。

我的问题是:

  1. 如何存储动态生成的复选框及其各自的地址字段,以便我可以使用细化按钮更新和修改选择?

  2. 我(或者我应该)如何实际设置每个复选框以在onClick上运行一个函数,这会从地图中删除标记?

1 个答案:

答案 0 :(得分:1)

在给定div中动态创建复选框

var holder = document.getElementById('holdingDiv');
var newCheckbox = document.createElement('input');
newCheckbox.type = 'checkbox';
newCheckbox.id = 'holdingDiv_option' + someValueIdentifier;
holder.appendChild(newCheckbox);

要运行这些复选框,添加事件处理程序:

// modify this if not just a bunch of checkboxes in a div:
var checkboxes = holder.getElementsByTagName('input'); 
for(var i=0; i < checkboxes.length; ++i) {
    var thisCheckBoxId = checkboxes[i].id;
    // create a listener
    var callback = function(event) {
        myGeneralHandler(i, event);
    }
    if(checkboxes[i].addEventListener) {
      checkboxes[i].addEventListener('click', callback, false);
    } else { //IE
      checkboxes[i].attachEvent('click', callback);
    }
}

然后设置myGeneralHandler以处理来自任何复选框的点击次数。