2

ご覧いただきありがとうございます。

現在、この例のコードを実装しています。私の aspx ファイルには、Label1 と Textbox1 が定義されています。私の aspx.cs ファイルでは、Page_Load メソッドで Label1.Text プロパティをランダムな文字列に設定しています。

私が含めた .js ファイルには、次のものがあります。

var Label1, TextBox1;

Sys.Application.add_init(AppInit);

function AppInit(sender) {
    Label1 = $get('Label1');
    TextBox1 = $get('TextBox1');

    $addHandler(Label1, "click", Label1_Click);
    $addHandler(TextBox1, "blur", TextBox1_Blur);
    $addHandler(TextBox1, "keydown", TextBox1_KeyDown);
}

ここで、さらにラベル (および対応するテキスト ボックス) を追加したいと考えていますが、追加のイベントごとに個別のハンドラーを定義するオーバーヘッドは必要ありません。つまり、これを回避したいのです。

$addHandler(Label1, "click", Label1_Click);
$addHandler(TextBox1, "blur", TextBox1_Blur);
$addHandler(TextBox1, "keydown", TextBox1_KeyDown);
$addHandler(Label2, "click", Label2_Click);
$addHandler(TextBox2, "blur", TextBox2_Blur);
$addHandler(TextBox2, "keydown", TextBox2_KeyDown);
...

送信者を正確に識別するパラメーターをハンドラーに渡し、ハンドラーに「これ」または何かを使用させるにはどうすればよいですか。また、対応するテキストボックスも編集する必要があるため、ラベルのインデックス (1,2,3...) を識別できるようにしたいと考えています。たとえば、Label1_Click の現在の実装は次のようになります。

function Label1_Click() {
    TextBox1.value = Label1.innerHTML;
    Label1.style.display = 'none';
    TextBox1.style.display = '';
    TextBox1.focus();
    TextBox1.select();
}

ありがとう、皆さん。

4

4 に答える 4

0

$ addHandlersは、ハンドラーを追加するプロセスを高速化するのに役立ちます...また、JSでは、次のようにしてその他のデータをオブジェクトに添付できます。Label1 ["somenewproperty"] = value; したがって、特定の属性をアタッチしてイベントハンドラーをチェックインできます...ただし、リソースを消費するので、これを行う量に注意してください...

あるレベルでは、JSは、コードの量を減らすために、聞きたいオブジェクトとオブジェクトの順序をどのように認識しているのでしょうか。たぶん、テキストボックスとラベルの配列を格納し、それらのオブジェクトをインデックスで参照しますが、あるレベルでは、特定の配管コードから逃れることはできません。

HTH。

于 2010-08-24T17:36:19.683 に答える
0

デリゲートを作成してみることができます。たとえば、ラベルの場合:

function AppInit(sender) {
  $addHandler(Label1, "click", Function.createDelegate(this, LabelClick());
  $addHandler(Label2, "click", Function.createDelegate(this, LabelClick());
}

function LabelClick(sender)
{
 /..
}
于 2010-08-24T17:44:44.793 に答える
0

多くの方法がありますが、これはどのブラウザでも完全に機能し、ライブラリは必要ありません。

このページのすべての入力に onclick ハンドラーを追加し、2 次元配列から取得する 2 つのパラメーターを与えます。クロージャーを使用して、ハンドラーがまだ特定のパラメーターにアクセスできることを確認しました。また、私はグローバル オブジェクト (p from page) を作成したので、変数でグローバル名前空間が乱雑になることはありません。

<!DOCTYPE html>
<html>
    <head>
        <script>
            var p = {
                onload: function() {
                    var btns = document.getElementsByTagName("input");
                    var parameters = [["btn1 p1", "btn1 p2"], ["btn2 p1", "btn2 p2"]];
                    for(var i = 0, ceiling = btns.length; i < ceiling; i++) {
                        btns[i].onclick = function(par1, par2) {
                            return function() {
                                p.btnOnclick(par1, par2);
                            };
                        }(parameters[i][0], parameters[i][1]);
                    }
                },
                btnOnclick: function(par1, par2) {
                    alert("par1: " + par1 + " | par2: " + par2);
                }
            };
        </script>
    </head>
    <body onload="p.onload()">
        <input type="button" value="button1"/>
        <input type="button" value="button2"/>
    </body>
</html>
于 2012-03-17T09:25:26.937 に答える
0

これは古い質問であることは知っていますが、昨日、まったく同じ問題に直面しました。これが私が思いついた解決策です。

私はそれがあまり好きではありませんが、より簡単な方法を見つけていません。この方法でテキストボックスにリンクしたいすべてのラベルにカスタム CssClass を使用します (テキストボックスについても同じです)。次に、それらを繰り返し処理し、ラベルかボタンかに応じて、対応するハンドラーをアタッチします。

var labels;
var texts;

Sys.Application.add_init(AppInit);

function AppInit(sender) {

  labels = document.getElementsByClassName('lblDynamic');
  texts = document.getElementsByClassName('txtDynamic');

  for (i = 0; i < labels.length; i++)
  {
      $addHandler(labels[i], "click", Label1_Click);
  }

  for (i = 0; i < texts.length; i++) {

      $addHandler(texts[i], "blur", TextBox1_Blur);
      $addHandler(texts[i], "keydown", TextBox1_KeyDown);
  }
}

次のステップは、メソッド ハンドラー内のジェネリック コントロールにアクセスすることです。thisこれは、リファレンスを使用すると非常に簡単です。例：

function TextBox1_KeyDown(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    this.blur();
  }
}

しかし、ここで問題があります: 特定のラベルが特定のテキストボックスとペアになっていることをどのように知ることができますか? 両方のコントロールに非常によく似た ID を使用します。ASP は、ページをレンダリングした後にビューステートの奇妙な命名法を追加するので、余分なテキストを取り除くために非常に汚いトリックを使用する必要があります。次に、テキストボックスコントロールを繰り返し処理し、処理されたイベントのラベルと一致する場合は、投稿した例のように操作できます:

function Label1_Click() 
{
    var offset = this.id.indexOf('lbl') + 3;

    for (j = 0; j < texts.length; j++) 
    {
        if (texts[j].id.substring(offset) == this.id.substring(offset)) 
        {
            texts[j].value = this.innerHTML;
            this.style.display = 'none';
            texts[j].style.display = '';
            texts[j].focus();
        }            
    }
}

この場合、私のラベルとテキストボックスはこのように宣言されています。非常によく似た命名法に注意してください。

<asp:Label runat="server" CssClass="lblDynamic" ID="lblExerciseName">My Text</asp:Label>
<asp:TextBox runat="server" CssClass="txtDynamic" ID="txtExerciseName" Style="display: none;" />

それが役に立てば幸い ：）

于 2012-03-17T08:59:43.090 に答える