データ属性を使用して変数をJqueryでターゲット設定および更新する

Question

データ属性を使用して変数をどのように対象として更新できるかを知りたいと思います。

Link to JSFiddle

Htmlの

<label>Update Foo</label> 
<input type="range" class="slider" min="1" max="100" step="1" value="50" data-var="foo"> 

<label>Update Bar</label> 
<input type="range" class="slider" min="1" max="100" step="1" value="10" data-var="bar"> 

はJavaScript

var foo = 50, // when slider is changed these variables are updated 
     bar = 10; 

// update global variable 
function updateVariable(variable, value) { 
    variable = value; 
    console.log(foo); 
    console.log(bar); 

    // other function called here that uses foo and bar 
} 

// input even listener 
$('.slider').on("change mousemove", function() { 
    updateVariable($(this).data("var"), $(this).val()); 
}); 

私は複数を持ってする方法を把握しようとしていますので、私はこれを行う方法をお知りになりたい理由は、ありますJSをシンプルに保ちながら、変数を更新する入力要素。これはイベントが単に設定されない理由です。foo = $(this).val()各入力要素に対してイベントリスナーと関数を作成する前に、これを処理するより効率的な方法を知りたいと思います。

Answer 1

使用する方法が正しく動作しません。基本的には、目標である変数を更新するのではなく、$(this).data("var") = $(this).val()と言っています。これを修正するために、オブジェクトとしてfooとbarプロパティを作成しました。

var myObject = { 
    foo: 50, 
    bar: 10 
}; 

// input even listener 
$('.slider').on("input", function() { //remove mouseover event to hide spam 
    myObject[$(this).data("var")] = $(this).val(); 
    console.log("Foo: " + myObject.foo + " Bar: " + myObject.bar); 
}); 

// Alternatively you can access properties objects like this myObject["foo"] as well. 

Working Example

これは、これらのプロパティに簡単にアクセスすることができますし、彼らがはるかに簡単な方法で更新することができます。

Answer 2

これを行うには、あなたのupdateVariable()メソッドに3つのものを渡す。更新する要素、更新する属性の名前、設定する値を指定します。このような何か：言われていること

// update global variable 
function updateVariable(el, dataAttr, value) { 
    $(el).data(dataAttr, value); 
} 

// input even listener 
$('.slider').on("change mousemove", function() { 
    updateVariable(this, 'var', this.value); 
}); 

Working example

は、私は、この抽出は完全に冗長であると信じます。あなたがやっているのは、jQuery自身のdata()メソッドをラップし、追加のビジネスロジックや機能を追加することだけです。各イベントハンドラ内からdata()を呼び出すだけでよいでしょう。