JavaScriptからHTMLを分離することはできませんか？具体的には

Question

、私はこの種のコードを避けることについて話している：ここで

<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コード内のイベントハンドラを入れるだけで実際にはより洗練されたものになります。

思考？きちんと

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

以上：

Answer 1

これまで同様のことをしなければならず、ID属性の値を解析することに満足できませんでした。

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

：

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

それとも、検証についてどのように宗教に応じて、ちょうどカスタム属性を使用します。私が提案できる最善のことは、あなたがrel属性のように、あなたが必要とする値のために別の属性を使用することです

Answer 2

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

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

Answer 3

を私は間違いなくあなたのJavaScriptとHTMLを分けるべきだと思います。検索/保守が簡単になり、10個ではなく1個の場所を編集できます。自分自身を繰り返さないでください。

jQueryのライブの機能が使用されます。 10個のテキスト入力がある場合は、2つではなく20個のイベントハンドラーを追加します（1つはページ上のすべてのフォーカスハンドラー用で、もう1つはページ上のすべてのキー押しハンドラー用です）。

また、karimにあなたのコメントをお寄せください、私はあなた自身を複製する理由は見当たりません。必要に応じて、命名規則に一貫している限り、idを渡すか、正規表現で変換するのは簡単です（例：this.id.replace(/.*(\d+)$/,'')）。しかし、代わりに直接DOM要素参照を渡して、あなたの関数でそれを処理するほうがよいでしょう。

最後に、あなたはこれのいくつかの側面が吸うと思うようです。たぶん私はポイントを見逃しているが、IDやDOM参照、またはあなたが何をする必要があるものをmainupalitingするのが難しいのかを明確にすることはできますか？たぶんあなたが次にやっていることの長いコードサンプルを投稿してください。

Answer 4

1つのJavaScriptブロックからすべてのイベントを管理しようとします。ページ上の要素を参照できるのであれば、これが可能でなければなりません。

Answer 5

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

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

多くの要素に対してこれを実行しなければならない場合、パフォーマンスの影響がどのようになるかわかりません。

Answer 6

あなたが本当にあなたは、このようなイベントハンドラを設定し

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

...あなたが入力タグにカスタム属性を追加することができthis.Idを渡したくない場合は...

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

私は個人的にカスタム属性が好きです。彼らはHtmlタグにカスタムメタデータを与え、マークアップ内にそのすべてを保持する方法を提供します。 :-(

Answer 7

$(document).ready(function(){ 
    var update = function(){ updateCharsLeft(this.id.split("_")[1]); }; 
    $("input.title") 
     .focus(update) 
     .keypress(update); 
}); 

Answer 8

これはUnobtrusive Javascript techniqueが焦点を当てて正確に何ですが。