1

次のようにonclickハンドラ関数を割り当てるhtmlボタン「classA」、「classB」、「classC」があります。

var classA = document.getElementById('classA');
classA.onclick = filterByClassA;

var classB = document.getElementById('classB');
classB.onclick = filterByClassB;

var classC = document.getElementById('classC');
classC.onclick = filterByClassC;

これら 3 つの関数は同じことを行いますが、違いはクラスだけです。では、これらのボタンに 1 つの機能を割り当てて、各ボタンに異なるパラメーターを指定して呼び出すことはできますか。以下のようなもの

var classA = document.getElementById('classA');
classA.onclick = filterByClass('classA');

var classB = document.getElementById('classB');
classB.onclick = filterByClass('classB');

var classC = document.getElementById('classC');
classC.onclick = filterByClass('classC');

これは割り当てではなく関数呼び出しであることはわかっていますが、これは間違っていますが、これを達成できる方法はありますか?つまり、関数を割り当ててパラメーターを同時に渡すが、呼び出しませんか?

4

3 に答える 3

6 
function filterByClass(className)
{

    return function()
    {
        // Do something with className
        console.log(className);
    }
}
于 2013-06-07T08:46:18.480 に答える
3

ここでバインドが役立ちます。これは部分適用と呼ばれます。

バインド構文

fun.bind(thisArg[, arg1[, arg2[, ...]]])

  • 第 1 パラメータは、呼び出されたときの関数のスコープです。
  • 2 番目からは、任意の数の引数を渡すことができます。それがどのように機能するかを知るには、以下のコードを参照してください。

コード：

var classA = document.getElementById('classA');
classA.onclick = filterByClass.bind(classA, 'classA');

var classB = document.getElementById('classB');
classB.onclick = filterByClass.bind(classB, 'classB');

var classC = document.getElementById('classC');
classC.onclick = filterByClass.bind(classC, 'classC');

function filterByClass(className, eventObject) {
  console.log(this, className, eventObject);
}

アップデート：

Compatibility上記の MDN リンクのセクションを確認してください。bind最新でないブラウザで使用する場合は、これを使用する必要があるかもしれません。

于 2013-06-07T08:51:29.083 に答える
1

私は常にコードをできるだけ短くしようとしています

ボタンがコンテナ内にある場合は、それを行うことができます。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>atest</title>
<script>
window.onload=function(){
 var c=document.getElementsByTagName('div')[0].childNodes,
 l=c.length,
 filterByClass=function(){
  console.log(this.id);//this.id is the classA or whatever
 };
 while(l--){
  c[l].onclick=filterByClass;
 }
}
</script>
</head>
<body>
<div>
 <button id="classA">A</button>
 <button id="classB">B</button>
 <button id="classC">C</button>
</div>
</body>
</html>

この場合

document.getElementsByTagName('div')[0]

ドキュメントの最初の div を返します

childNodes

そのdiv内のボタンのリストを提供します

while 関数は、関数「filterByClass」で onclick イベントを追加します

内部 filterByClass u によって要素にアクセスできるため、with をthis返すidthis.id

于 2013-06-07T08:57:27.173 に答える