【问题标题】：call a javascript function inside a div在 div 中调用 javascript 函数
【发布时间】：2012-10-13 21:38:38
【问题描述】：

我想创建一个网页，其中包含多个 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" 的绘制函数。现在它只调用最后定义的绘图函数。

更新：

请注意，我不能将不同的绘制方法组合成一个，这样会得到一个类似形状的参数。绘制方法将完全相互独立。

【问题讨论】：

每次重新定义 window.draw 时，它都会被覆盖。您要么需要为每个函数命名（即，将其附加到一个（否则为空）对象），要么为每个函数赋予不同的名称。 Javascript 中没有“div-scope”；）
在下面我的回答中找到一个可行的解决方案。

标签： javascript call

【解决方案1】：

你可以这样称呼它

HTML：

<div class="slot" id="slot1">Draw1</div>
<div class="slot" id="slot2">Draw2</div>

JS：

function draw()
{
    console.log('Drawed! '+$(this).attr('id'));
}

$(document).ready( function() {
    $('div.slot').each(function(i, d) {
        console.log('slot found: ' + d.id);
        draw.call($(this));
    });
});

An Example。

【讨论】：

嗯不幸的是这不是我需要的，每个 div 将包含不同的绘制方法，因此将 id 作为参数传递将无济于事。你可以这样看，我想为每个 div 围绕 draw 方法创建一个范围。
这就是它所做的，我没有通过id 而是每个div 本身。 draw.call($(this)); 正在为每个 div 单独调用方法。
@Fabian，检查this example了解每个draw call的范围，每个draw call都有自己的div范围，每个draw使用单独的div。
是的，但您只有一个绘制方法。我需要每个 div 一个绘制方法。
是的，在您编辑之前不清楚（未提及），但我明白您想要什么。

【解决方案2】：

在这种情况下，我发现实现“真正的 OOP”的最简单方法是在文档级别调度所有事件：

创建一个简单的对象并在主视图和视图中加载这个对象：

var events = {someCustomEventFromMain:'someCustomEventFromMain', someCustomEventFromView:'someCustomEventFromView'}

现在你可以像 jQuery 一样在文档上触发事件

$(document).trigger(events.someCustomEventFromMain, somedata);

您可以从任何视图或 div 或其他地方收听

$(document).on(events.someCustomEventFromMain, function(__e, __data){
      //___e is the event emitted from __e.target
      //__data is the data object you wish to pass with the event
      //do something when event occurs

});

因此，如果每个下标都在文档级别侦听某个事件，在您的情况下为“drawEvent”，那应该可以解决问题。你甚至可以在事件的数据中传递一个参数，比如'circle'。希望这会有所帮助。

【讨论】：

【解决方案3】：

问题

每次重新定义 window.draw() 时，它都会被覆盖。您要么需要为每个函数命名（即，将其附加到一个（否则为空的）对象），要么为每个函数指定一个不同的名称。 Javascript 中没有“div-scope”；）

解决方案

您可以根据div的id命名每个函数，并使用object["methodName"]()语法动态调用它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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
        window[d.id];
      });
    });
  </script>

  <div class="slot" id="slot1">
    <script type='text/javascript'>
      function slot1() {
        console.log('Here we draw a circle');
      };
    </script>
  </div>

  <div class="slot" id="slot2">
    <script type='text/javascript'>
      function slot2() {
        console.log('Here we do something totally different and draw a rectangle');
      };
    </script>
  </div>

</body>
</html>

http://jsbin.com/mogeluzicu/1/edit?html,console

【讨论】：

【解决方案4】：

<html>
<head>

<script>
    $(document).ready(
            function() {
                $('#show').call(callfun());
            });
</script>
</head>
<body>
<h:form>
  <div id="show" align="center">
    <script>
    function callfun(){
    var data = "hi";
   alert(data);
  }
  </script></div>
    </h:form>
  </body>
  </html>

我认为它可能有效。

【讨论】：

【解决方案5】：

为什么要在divs 中定义脚本？

在一个脚本块中完成所有逻辑：

<head>      
<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();
      });
    });

    function draw(behavior) {
        console.log(behavior);
    }
  </script>

  <div class="slot" id="slot1" data-behavior="drew 1">
  </div>

  <div class="slot" id="slot2" data-behavior="drew 2">
  </div>

</body>
</html>

如果您想做一些更复杂的事情，您应该考虑构建一个面向对象的 javascript 应用程序，每个块的功能都派生自一个类“插槽”。

https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript

【讨论】：

每个 div 的绘制方法都来自一个 ajax 调用，并且彼此之间会有很大的不同。因此，我不能只有一个通过 div 的绘制方法。
如果draw方法是通过ajax进来的，就不能用一个包装函数来调用吗？
AndyL：你能举个例子吗？

【解决方案6】：

发生这种情况的原因是您不断覆盖绘图函数。为什么没有一个脚本页面，在其中保存一组指向正确函数的函数指针，如下所示：

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">

你怎么看。注意语法尚未经过测试。

【讨论】：

我想要实现的是通过 ajax 加载 div 内容并在每个页面调整大小时调用每个 div 的 draw 方法。我现在不想返回从 ajax 调用中绘制的 draw1，...，只是通用的 draw 方法。