web-dev-qa-db-ja.com

div内でjavascript関数を呼び出す

それぞれが異なる実装（汎用インターフェイスなど）の同じ描画関数を含む複数の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」と呼ぶ方法がわかりません。現在、最後に定義された描画関数のみを呼び出します。

更新：

さまざまな描画方法を組み合わせて、形状のようなパラメータを取得することはできません。描画方法は互いに完全に独立しています。

javascriptcall
6
Fabian

あなたはそれを次のように呼ぶことができます

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

例 。

2
The Alpha

なぜdivsでスクリプトを定義しているのですか？

ロジックをすべて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

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

私はそれがうまくいくかもしれないと思います。

1
Faariz Mohammed

問題

再定義するたびに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

1
connexo

発生している理由は、描画関数を上書きし続けるためです。次のように、適切な関数への関数ポインタの配列を保持するスクリプトページがないのはなぜですか。

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

あなたはどう思いますか。 sytaxはテストされていないことに注意してください。

1
thatidiotguy

この場合、「実際の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'のように、イベントのデータにパラメータを渡すこともできます。お役に立てれば。

1
Eric