[英]Managing dynamically generated elements with javascript
I have code which generates markers on a Google map based on certain criteria. 我有根据特定条件在Google地图上生成标记的代码。 What I'm attempting to do is generate a list next to the map which would contain the address associated with each marker that appears on the list as well as a checkbox next to each address.
我想做的是在地图旁边生成一个列表,其中将包含与列表中出现的每个标记关联的地址,以及每个地址旁边的复选框。 At the bottom of this list would be a "refine" button which would return only the results which had their checkbox selected.
该列表的底部是一个“优化”按钮,该按钮仅返回选中了复选框的结果。
My question are: 我的问题是:
How would I store the dynamically generated checkboxes and their respective address fields so that I could update and modify the selection with the refine button? 我将如何存储动态生成的复选框及其各自的地址字段,以便可以使用“优化”按钮更新和修改选择?
How would I (or should I) actually set each checkbox to run a function on onClick which would remove the marker from the map? 我(或应该)如何实际设置每个复选框以在onClick上运行一个函数,该函数将从地图上删除标记?
Create checkboxes on the fly inside a given div 在给定的div内动态创建复选框
var holder = document.getElementById('holdingDiv');
var newCheckbox = document.createElement('input');
newCheckbox.type = 'checkbox';
newCheckbox.id = 'holdingDiv_option' + someValueIdentifier;
holder.appendChild(newCheckbox);
To run through these checkboxes adding event handlers: 要运行这些复选框并添加事件处理程序,请执行以下操作:
// 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);
}
}
Then set up myGeneralHandler
to handle clicks from any checkboxes. 然后设置
myGeneralHandler
以处理来自任何复选框的点击。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.