我想创建一个包含几个div的网页,每个div包含具有不同实现的相同绘制函数(如通用接口).加载页面后,我想遍历所有div并一个接一个地调用每个绘制函数.
到目前为止,我的页面如下所示:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
</head>
<body>
<script type='text/javascript'>
$( document ).ready( function() {
// Draw all slots
$('div.slot').each(function(i, d) {
console.log('slot found: ' + d.id);
// d.draw() does not work
draw();
});
});
</script>
<div class="slot" id="slot1">
<script type='text/javascript'>
function draw() {
console.log('Here we draw a circle');
};
</script>
</div>
<div class="slot" id="slot2">
<script type='text/javascript'>
function draw() {
console.log('Here we do something totally different and draw a rectangle');
};
</script>
</div>
</body>
</html>
不幸的是我不知道如何调用所选div"d"的绘制函数.现在它只调用最后定义的绘图函数.
请注意,我不能将不同的绘制方法组合成一个可以获得形状参数的方法.绘制方法将完全相互独立.
发生这种情况的原因是因为您不断覆盖绘图函数。为什么没有一个脚本页面来保存指向正确函数的函数指针数组，如下所示：
var array = (draw1, draw2, draw3, ...);
function draw1()
{
//do your thing on div1
}
...
function drawn()
{
//do your n thing on divn
}
现在，对于第一个 div，您需要调用位于数组索引 1 处的draw1。
HTML：
<div id="draw1">
</div>
....
<div id="drawn">
你觉得怎么样。注意 sytax 尚未经过测试。
| 归档时间： |
|
| 查看次数： |
64098 次 |
| 最近记录： |