6

それぞれが異なる実装（ジェネリックインターフェイスなど）の同じ描画関数を含む複数のdivを含むWebページを作成したいと思います。ページを読み込んだ後、すべての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

でスクリプトを定義するのはなぜdivですか?

1 つのスクリプト ブロックですべてのロジックを実行します。

<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

于 2012-10-23T21:27:06.287 に答える
1

問題

window.draw()再定義するたびに上書きし続けます。それぞれに名前を付ける (つまり、それを (そうでなければ空の) オブジェクトにアタッチする) か、すべての関数に個別の名前を付ける必要があります。Javascriptには「divスコープ」はありません;）

解決

に従って各関数に名前を付け、構文を使用して動的に呼び出すことができdivます。idobject["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、コンソール

于 2015-06-07T05:52:43.580 に答える
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 に答える