2

各セルの onclick イベントで呼び出す関数を指定できる一般的なテーブル ジェネレーターを作成しようとしています。その後、関数はページの別の場所で定義されます。

問題は、適切なタイミングで関数を評価するページを取得できないことです。クリックイベントを発生させたときではなく、DOM を構築しているときに文字列を関数に変換したいのです。たぶんこれは Javascript/JQuery では不可能ですか?

私が最初に C# でサーバー側に書いたコードの単純化されたバージョンは次のとおりです。

string functionCall = "DoSomething(4);";
TableCell detailCell = new TableCell();
detailCell.Attributes.Add("onClick", functionCall);
functionCall = "DoSomething(5);";
detailCell = new TableCell();
detailCell.Attributes.Add("onClick", functionCall);

これは、ブラウザでhtmlとしてレンダリングされたときに機能しました。次のようになりました。

 function DoSomething(p)
 {
      alert(p);
 }

<td onclick="DoSomething(4)"></td>
<td onclick="DoSomething(5)"></td>

この機能を Javascript で複製したいと考えています。

私が行った場合：

var functionCall = 'DoSomething(4);';
$('#detailCell').attr('onclick', functionCall);

何らかの理由で IE7 ではイベントが発生しませんが、Chrome では発生します。

私が行った場合：

var functionCall = 'DoSomething(4);';
$('#detailCell1').click(function () { eval(functionCall); });
functionCall = 'DoSomething(5);';
$('#detailCell2').click(function () { eval(functionCall); });

クリックイベントが追加されたときに functionCall をテキストに変更しません。代わりに、セルがクリックされたときに functionCall を評価します。これは、functionCall の値が間違っていることを意味します。

たとえば、detailCell1 をクリックしても、それが functionCall の最後の値であるため、常に DoSomething(5) を実行します。

私が行った場合：

var functionCall = 'DoSomething(4);';
$('#detailCell1').click(eval(functionCall));

クリックされたときではなく、クリックイベントを追加するとすぐに functionCall の関数が実行されます。

説明するのが難しいので、これが何らかの意味を持っていることを願っています。

基本的に私はできるようになりたいだけです

<td onclick="any javascript I feel like storing in a string"></td>

JQueryを使用。

これは可能ですか？

これは、stackoverflow に関する初めての投稿ですので、お手柔らかにお願いします...

4

4 に答える 4

2

これを試して...

var functionCall = 'DoSomething(4);';

$('#detailCell1').click((function (code) {
  return function () { 
     eval(code); 
  };
}(functionCall)));

ここで何が起こるかというと、ハンドラーを作成するときにパラメーター「コード」に割り当てることによって文字列をキャプチャします。

現在のシナリオでは、クリック ハンドラーは、ハンドラーが作成された時点ではなく、クリックされた時点で文字列の値を使用します。

これは閉鎖と呼ばれます！

(function (code) {
  return function () { 
     eval(code); 
  };
}(functionCall));

functionCall 値が code パラメーターに割り当てられます。functionCall を変更しても、コード パラメータは古い値を参照します。

于 2013-01-25T11:10:41.563 に答える
0

私の理解によると、異なる引数で異なる関数を呼び出す必要があります。これを実現するには、文字列を生成し、 eval() 関数を使用してそれらの関数を呼び出そうとします。これらを次のようにしましょう。

1.これらの関数呼び出し文字列を配列として渡すだけで、ロード時にJavaScriptコードが次のようになります。

var functioncalls = ['DoSomething(1)','DoSomethingMore(1,2)','DoDifferent("hello world")'];

2.次に、関数呼び出し配列を JavaScript でループし、それらを別のクリック イベントに割り当てます。複雑さを避けるために、セレクターは #detailCell0、#detailCell1、#detailCell2 などであると想定します。次に、コードは次のようになります。

$(function(){
      functioncalls.forEach(function(functioncall,index){
          $("detailCell"+index).click(function(){ 
                eval(functioncall);
           })
      });
    })

注: これを行うには多くの方法があります。

于 2013-01-25T11:32:53.407 に答える
0

関数呼び出しを文字列にする必要がある理由が明確ではありません。ご覧のとおり、セルごとに異なるパラメーターを持つ 1 つの関数を起動する必要があるセルが多数あります。

この場合、次のようにします。

TableCell detailCell = new TableCell();
detailCell.Attributes.Add("class", "detailCell");
detailCell.Attributes.Add("data-num", "4");

detailCell = new TableCell();
detailCell.Attributes.Add("class", "detailCell");
detailCell.Attributes.Add("data-num", "5");

そして、jsのどこかに：

$(function() {
    $(".detailCell").click(function(){
        DoSomething($(this).data("num"));
    });
})

classすべての詳細セルにクリック ハンドラーを簡単に割り当てるには、テーブル セルの on が必要なので、次のように記述する必要はありません。

$('#detailCell1').click(function () { DoSomething(4); });
$('#detailCell2').click(function () { DoSomething(5); });

これdetailCell.Attributes.Add("data-num", "5");により、 のパラメータとして使用する数値を指定できますDoSomething。この行で取得されていることがわかります DoSomething($(this).data("num")); jQuery.data。関数が使用されています。thisクリックされている要素を指します 。$(function() {})- これはjQuery.readyfunction の省略形です。これを使用すると、ページが使用可能になったときにその関数内のコードが実行されることを保証できます。

于 2013-01-25T11:19:05.520 に答える
0

最初に文字列として作成してからその文字列を評価しようとする代わりに、単純に関数値を作成できます (関数は JS でもオブジェクトです)。

だから代わりに

var functionCall = 'DoSomething(4);';
$('#detailCell1').click(eval(functionCall));

行う

$('#detailCell1').click(function(e){DoSomething(4);});

これにより、クリックごとに新しい関数が作成されます。(あなたの場合、e パラメータを省略することができます。必要な変更を簡単にするためのものです。

渡すパラメータのセットがある場合は、ファクトリ メソッドを作成できます。

var doSomethingFactory = function(num){
    return function(e) { DoSomething(num);};
}
$('#detailCell1').click(doSomethingFactory(4));
于 2013-01-25T11:24:57.053 に答える