Fatal编程技术网

在div中调用javascript函数

javascript

在div中调用javascript函数,javascript,call,Javascript,Call,我想创建一个网页，其中包含几个div，每个div包含具有不同实现的相同draw函数（如通用接口）。加载页面后，我希望遍历所有div并逐个调用每个draw函数 到目前为止，我的页面如下所示： <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script language="javascript" type="text/ja

我想创建一个网页，其中包含几个div，每个div包含具有不同实现的相同draw函数（如通用接口）。加载页面后，我希望遍历所有div并逐个调用每个draw函数

到目前为止，我的页面如下所示：

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


$（文档）.ready（函数（）{
//画出所有的槽
$（'div.slot'）。每个（函数（i，d）{
console.log（'找到的插槽：'+d.id）；
//d.draw（）不起作用
draw（）；
});
});
函数绘图（）{
log（'这里我们画了一个圆圈'）；
};
函数绘图（）{
log（'在这里我们做了一些完全不同的事情并绘制了一个矩形'）；
};
不幸的是，我不知道如何调用所选div“d”的draw函数。 现在它只调用最后定义的draw函数

更新：
请注意，我不能将不同的绘制方法组合成一个参数，如图形。绘制方法将彼此完全独立。

发生这种情况的原因是您不断覆盖绘制函数。为什么不创建一个脚本页面，其中包含指向正确函数的函数指针数组，如下所示：

var array = (draw1, draw2, draw3, ...);

function draw1()
{
    //do your thing on div1
}

...

function drawn()
{
    //do your n thing on divn
}
现在，对于第一个div，您需要调用位于数组索引1处的draw1

HTML:


....

你怎么想。注意sytax还没有经过测试。

你可以这样称呼它

HTML:

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

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));
    });
});
。
​

为什么要在
div
s中定义脚本

在一个脚本块中执行所有逻辑：

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


$（文档）.ready（函数（）{
//画出所有的槽
$（'div.slot'）。每个（函数（i，d）{
console.log（'找到的插槽：'+d.id）；
//d.draw（）不起作用
draw（）；
});
});
函数绘制（行为）{
日志（行为）；
}

如果你想做更复杂的事情，你应该考虑建立一个面向对象的JavaScript应用程序，每个块的功能都是从一个“槽”类派生出来的。

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

创建一个简单对象，并将该对象加载到主视图和视图中，如下所示：

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”），那么应该可以做到这一点。您甚至可以在事件的数据中传递参数，如“圆”。 希望这有帮助。

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


$（文件）。准备好了吗(
函数（）{
$（'#show'）。调用（callfun（））；
});
函数callfun（）{
var data=“hi”；
警报（数据）；
}
我想它可能有用。

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

解决方案 您可以根据
div
的
id
命名每个函数，并使用
对象[“methodName”]（）
语法动态调用它


$（文档）.ready（函数（）{
//画出所有的槽
$（'div.slot'）。每个（函数（i，d）{
console.log（'找到的插槽：'+d.id）；
//d.draw（）不起作用
窗口[d.id]；
});
});
函数slot1（）{
log（'这里我们画了一个圆圈'）；
};
函数slot2（）{
log（'在这里我们做了一些完全不同的事情并绘制了一个矩形'）；
};
我想实现的是通过ajax加载div内容，并在每个页面上调整大小，我想调用每个div的draw方法。我现在不想返回draw1。。。从ajax调用中提取，只是通用的draw方法。嗯，不幸的是，这不是我需要的，每个div将包含一个不同的draw方法，因此将id作为参数传递是没有帮助的。您可以看到，我希望围绕每个div的draw方法创建一个范围。这就是它所做的，我没有传递
id
，而是传递每个
div
本身<代码>draw.call（$（this））为每个
div
@Fabian单独调用方法，检查以了解每个draw调用的范围，每个
draw
调用都有自己的div范围，每个
draw
使用单个
div
。是的，但您只有一个draw方法。我需要每个div使用一个draw方法。是的，在编辑之前还不清楚（未提及），但我理解您的要求。每个divs draw方法都来自一个ajax调用，并且彼此非常不同。因此，我不能只有一个draw方法通过div。如果draw方法是通过ajax引入的，你就不能用一个包装函数来调用它吗？AndyL：你能举个例子吗？每次重新定义它时，你都会覆盖
窗口。draw
。您需要为每个函数命名名称空间（即，将其附加到一个（否则为空）对象），或者为每个函数指定不同的名称。Javascript中没有“div scope；”）在我下面的答案中找到一个有效的解决方案。 
<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>