1

動的に作成された Javascript イベント ハンドラー関数に問題があります。

私のHTMLには次のものがあります：

<input id="nvctrlfont1" type=number min=18 max=144 step=1 value=36 maxlength="3" size="8">
<input id="nvctrlfont2" class="color" value="000000" style="background-color:black;width:70px;">
<input id="nvctrlfont4" class="color" value="000000" style="background-color:black;width:70px;">

.....

クラスの色は単なる JavaScript カラー ピッカーです。

要素 ID には、ブール値として 1、2、4 ... などがあります。つまり、JS 関数は、HTML 入力要素を非表示または表示するために使用されるブール値を受け取ります。非表示の要素にはイベントが割り当てられず、非表示でない要素にはイベントが割り当てられます。

イベント関数は nvFontFuncs に常駐します。

私が解決できないように見える問題：

関数の割り当てが nvEL.onchange に行われると、毎回同じ関数に置き換えられているように見えます。

たとえば、ブール値 nvFontBool が「6」と入力された場合、入力要素 nvcontrolfont2 および nvcontrolfont4 を有効にし、nvFontFuncs nvctrlfont2 および 4 の関数をそれぞれ onchange イベントに割り当てる必要があります。

ただし、 nvctrlfont4 関数が両方の要素に割り当てられることになります。

つまり、どの要素に onchange イベントが設定されていても、クリックすると最後に割り当てられたイベントが呼び出されます。私の例では、INPUT nvctrlfont2 または nvctrlfont4 要素を変更しても nvctrlfont4() が呼び出されます。

たとえば、nvFontBool パラメータを「7」に変更すると、3 つの入力要素すべてが有効になります。次に、どちらが変更されても、nvctrlfont4() を呼び出します (これはたまたまループで最後に割り当てられたものです)。

addEvent と setAttributes も使用してみましたが、同じ結果になりました。関数の onchange 割り当ては、バインド時に静的であるためです。したがって、最も「最近」の 1 つのバインドは、すべての要素の以前のバインドをそれぞれ置き換えることになります。

ヘルプ？

これがJSです。

var nvFontFuncs = {
  nvctrlfont1: function () { alert('Function 1'); },
  nvctrlfont2: function () { alert('Function 2'); },
  nvctrlfont4: function () { alert('Function 4'); }
};

ここに関数があります

function nvSetFontCtrls(nvFontBool)
{
    var nvEL;
    var nvName="nvctrlfont";
    var nvTemp;

    nvFg=1;
    while(nvFontBool != 0) {
        //alert("FontBool:"+nvFontBool);
        nvTemp=nvName+nvFg.toString();
       // nvTemp="func"+nvFg.toString(); 
        nvEL=document.getElementById(nvTemp);
        if(nvFontBool & nvFg) {
             nvEL.style.display="block";
             nvEL.onchange=function() { nvFontFuncs[nvTemp](); }
        }
        else {
            nvEL.style.display="none";        
        }
        nvFontBool=nvFontBool&(~nvFg); //alert("nvfontbool:"+dechex(~nvFg));
        nvFg = nvFg << 1; 
    }
}
4

2 に答える 2

0

問題は、nvTempがループの最後の値に設定されているため、ハンドラー関数が呼び出されると、nvTempは「nvctrlfont4」になります。

割り当てを使用するnvEL.onchange=nvFontFuncs[nvTemp]と、問題は解決されます

于 2013-03-15T21:46:46.853 に答える
0

次の機能を割り当てます。

function() { nvFontFuncs[nvTemp](); }

nvTempのローカル スコープ内の変数ですnvSetFontCtrls。したがって、ハンドラーが呼び出されると、もちろん、nvTemp には最後に設定された値が含まれます。

次のようなことができます。

nvEL.onchange=(function(nvTemp) {
  return function() { nvFontFuncs[nvTemp](); }
}(nvTemp));
于 2013-03-15T21:28:25.543 に答える