データ値を使用して別の変数を参照する方法

Question

データ属性を使用して以前の値に戻って参照するコンバータを作成しようとしています。

私が取得するように見えることはできません。

• データmy_currencyバック4259.00

$('input').keyup(function() { 
 
    var BTC = 4259.00 
 
    var ETH = 301.46 
 
    var LTC = 67.72 
 

 
    var USD = 1 
 
    var EUR = 0.83 
 
    var CNY = 6.46 
 

 
    var convertFrom = $('.js').data('my_currency'); 
 
    //Should refer back to EUR var 
 
    
 
    var convertTO = $('.js').data('this'); 
 
    //Should refer back to BTC var 
 
    
 
    var amount = $('input').val(); 
 
    var result = convertFrom * convertTO * amount; 
 

 

 

 
    var newresult = result.toFixed(2); 
 
    $('.output').html(newresult); 
 

 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="js" data-my_currency="EUR"></div> 
 
<div class="js" data-this="BTC"></div> 
 
<input type="text" class="input" /> 
 

 
<div class="output">Me</div>

Answer 1

また、既存のコードを変更することなく、グローバルスコープで変数を宣言することができます（避ける必要があります）。windowオブジェクトを使用して変数の値を取得します。

var BTC = 4259.00 
 
var ETH = 301.46 
 
var LTC = 67.72 
 

 
var USD = 1 
 
var EUR = 0.83 
 
var CNY = 6.46 
 

 
$(document).ready(function() { 
 
    $('input').keyup(function() { 
 
     var convertFrom = $('[data-my_currency]').data('my_currency'); 
 
     var convertTO = $('[data-this]').data('this'); 
 
     var amount = $('input').val(); //Assuming user enters only numbers 
 
     var result = window[convertFrom] * window[convertTO] * amount; 
 
     var newresult = result.toFixed(2); 
 
     $('.output').html(newresult); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="js" data-my_currency="EUR"></div> 
 
<div class="js" data-this="BTC"></div> 
 
<input type="text" class="input" /> 
 

 
<div class="output">Me</div>

Answer 2

を参照するために戻っ301.46

データ-これを参照するためにそれらをJavaに戻すようにしようとしている場合JavaScript変数を直接使用するのはなぜですか？

Bitcoinと通貨の価格がページの要素として書かれている場合は、それぞれ$('.js[data-my_currency]')[0].innerHTMLと$('.js[data-this]')[0].innerHTMLを探しています。

• .jsターゲットクラスnodeList
• [0]を返し$('.js[data-my_currency]')attributedata-my_currency
• 最初のノード
• .innerHTMLはコンテグラブグラブjs
• [data-my_currency]ターゲット：このダウンを破る

  そのノードの内側にnt。

$('input').keyup(function() { 
 
    var convertFrom = $('.js[data-my_currency]')[0].innerHTML; 
 
    var convertTO = $('.js[data-this]')[0].innerHTML; 
 
    var amount = $('input').val(); 
 
    var result = convertFrom * convertTO * amount; 
 
    var newresult = result.toFixed(2); 
 
    $('.output').html(newresult); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="js" data-my_currency="EUR">0.83</div> 
 
<div class="js" data-this="BTC">4259.00</div> 
 
<input type="text" class="input" /> 
 

 
<div class="output">Me</div>

この情報がお役に立てば幸い！ :)