5

具体的には、このタイプのコードを避けることについて話している:

<input type='text' id='title_33' class='title'
  onfocus='updateCharsLeft(33);' 
  onkeypress='updateCharsLeft(33);' />

onfocusここでは、とonkeypressイベント ハンドルを別々に、つまり .js ファイルに入れたいと思います。このような：

$(document).ready(function()
  {
    $(".title").focus(updateCharsLeft);
    $(".title").keypress(updateCharsLeft);
);

ただし、ここでの問題は、テキスト ボックスの ID を関数に渡す必要があることupdateCharsLeft()です。その関数でテキスト ボックスの ID から ID を抽出しなければならないのは面倒なので、実際には HTML コード内にイベント ハンドラーを配置するだけの方がクリーンです。

考え？

4

8 に答える 8

7

あなたはこれを行うことができません:

$(document).ready(function()
  {
    $(".title").focus(function() {
        updateCharsLeft(this.id);
    });
    $(".title").keypress(function() {
        updateCharsLeft(this.id);
    });
);

またはよりきちんと：

$(document).ready(function()
  {
    $(".title .another .someother .andAnother").focus(function() {
        updateCharsLeft(this.id);
    }).keypress(function() {
        updateCharsLeft(this.id);
    });
);
于 2009-07-08T11:30:16.373 に答える
2

私は以前に似たようなことをしなければなりませんでしたが、ID 属性から値を解析することに満足していませんでした。私が提案できる最善のことは、次の属性のように、必要な値に別の属性を使用することrelです。

<input type='text' id='title_33' class='title' rel='33' />

または、検証についてどの程度宗教的であるかに応じて、カスタム属性を使用してください。

<input type='text' id='title_33' class='title' myval='33' />
于 2009-07-08T12:09:10.397 に答える
1

JavaScript と HTML を分離する必要があると思います。検索/保守が容易になり、10 か所ではなく 1 か所を編集できます。同じことを繰り返さないでください。

jQueryのライブ機能の使用を検討します。10 個のテキスト入力がある場合、2 個ではなく 20 個のイベント ハンドラーをこの方法で追加します (ページ上のすべてのフォーカス ハンドラー用に 1 つと、ページ上のすべてのキープレス ハンドラー用に 1 つ)。

また、カリムへのコメントについてですが、なぜあなたが自分自身を複製するのかわかりません。命名規則が一貫している限り、必要に応じて ID を渡すか、正規表現で変換するのは簡単です。たとえば、 this.id.replace(/.*(\d+)$/,''). ただし、代わりに直接 DOM 要素参照を渡し、それを関数で使用する方がよいでしょう。

最後に、あなたはこれのいくつかの側面がうまくいかないと考えているようです. 要点がずれているかもしれませんが、id や DOM 参照の mainupaling やその他の必要なことの何がそんなに難しいのかを明確にしていただけますか? たぶん、次にやっていることのより長いコード サンプルを投稿してください。

于 2009-07-08T12:08:45.470 に答える
1

本当に渡したくない場合はthis.Id、入力タグにカスタム属性を追加できます...

<input type='text' id='title_33' idSuffix='33' class='title'/>

次に、次のようにイベント ハンドラーを設定します...

$(document).ready(function()
{
    $(".title").focus(function() {
        updateCharsLeft(this.idSuffix);
    });
    $(".title").keypress(function() {
        updateCharsLeft(this.idSuffix);
    });
);

私は個人的にカスタム属性が好きです。これらは、Html タグにカスタム メタデータを与え、それをすべてマークアップに保持する方法を提供します。ただし、Htmlバリデーターはそれらを好きではありません:-(

于 2009-07-08T12:12:52.640 に答える
0 
$(document).ready(function(){
    var update = function(){ updateCharsLeft(this.id.split("_")[1]); };
    $("input.title")
        .focus(update)
        .keypress(update);
});
于 2009-07-08T12:25:15.327 に答える
0

これはまさに控えめなJavascript技術が焦点を当てているものです。

于 2009-07-08T12:28:34.140 に答える
0

単一の JavaScript ブロックからすべてのイベントを管理しようとします。ページ上の要素を参照できる限り、これは可能です。

于 2009-07-08T12:10:23.920 に答える
0

文字列関数を使用して、値を解析して渡すことができます。

$(".title").focus(function() {
   var thisid = this.id;
   updateCharsLeft(thisid.substring(thisid.indexOf("_") + 1));
});

ただし、多くの要素に対してこれを行う必要がある場合、パフォーマンスへの影響がどうなるかはわかりません。

于 2009-07-08T12:11:10.800 に答える