在div中调用javascript函数

我想创建一个包含几个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你需要调用draw1,它位于数组的索引1.

HTML：

<div id="draw1">

</div>
....
<div id="drawn">

你觉得怎么样？注意sytax尚未经过测试.

在div中调用javascript函数

解决方法

相关文章