6

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

更新：

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

4

6 回答 6

2

你可以这样称呼它

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

一个例子。​</p>

于 2012-10-23T21:17:07.453 回答
2

为什么要在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 应用程序，每个块的功能都派生自一个类“slot”。

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

于 2012-10-23T21:27:06.287 回答
1 

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

我认为它可能会奏效。

于 2015-02-26T15:24:22.023 回答
1

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

创建一个简单的对象并将该对象加载到 main 和视图中，例如：

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”，那应该可以解决问题。您甚至可以在事件的数据中传递参数，例如“圆圈”。希望这可以帮助。

于 2014-01-03T14:57:31.380 回答
1

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

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

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

于 2012-10-23T21:08:00.770 回答
1

问题

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

解决方案

您可以根据div's命名每个函数，并使用调用它的语法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

于 2015-06-07T05:52:43.580 回答