1

現在、いくつかの変数を定義するこのようなブロックがあります

var slider_1  = document.querySelector('#slider_1');
var slider_2  = document.querySelector('#slider_2');
...

そして、次のような ID を取る func は次のとおりです。

function updateFromInput(id){               
    if(id==1){
        var x = input_1.value*1;
        x = Math.round((x*ratio)-offset);     
        slider_1.x.baseVal.value =  x/scale;
    }else if(id==2){
        var x = input_2.value*1;
        x = Math.round((x*ratio)-offset); 
        slider_2.x.baseVal.value =  x/scale;
    }
};

私は少しリファクタリングしようとしています。
代わりに、変数をアンダースコアではなくドットでインスタンス化できればと考えています

var slider.1  = document.querySelector('#slider_1');
var slider.2  = document.querySelector('#slider_2');

そうすれば、既に func に渡されている ID をより有効に活用し、大量の重複を排除することができます。それぞれの IF/ELSE 条件でそのコードを使用するのではなく
、単一の呼び出しのようなもので funcs を簡素化することを望んでいました。slider.id.x.baseVal.value = x/scale;

それを試してみると、「 Uncaught SyntaxError: Unexpected number 」というエラーが表示されます。
これはどのように行うべきですか?

4

2 に答える 2

4

オブジェクトでプレーンな数値キーを使用することはできません。

ただし、これを行うことができます:

var slider = {};  // or = [], if array syntax is more appropriate
slider[1] = ...
slider[2] = ...

さらに、キーが実際にリテラルトークンではなく変数である場合、提案した構文は許可されません。

あなたの例では、変数がたまたま持っている値ではなくslider.id、実際にリテラルkeyを持つオブジェクトを参照しています。 id id

変数を角括弧内に配置する必要があります。つまりslider[id]、関数は次のように記述されます。

function updateFromInput(id){               
    var x = +input[id].value;
    x = Math.round((x*ratio)-offset);     
    slider[id].x.baseVal.value =  x/scale;
};
于 2012-06-28T21:40:32.403 に答える
1

できません。は.、変数識別子として無効な文字です。

ただし、オブジェクトのプロパティで使用できます。

var sliders = {
    "slider.1": document.querySelector('#slider_1'),
    "slider.2": document.querySelector('#slider_2')
};

次に、メンバー演算子の角かっこバージョンを使用して、プロパティにアクセスします。

alert( sliders["slider.1"].id );
于 2012-06-28T21:40:42.310 に答える