当用户选择选项时，指定要使用的值JQUERY＆amp; AJAX

时间：2017-03-24 09:02:02

标签： jquery html json ajax

我正在尝试使用JQUERY，JSON和AJAX创建一个小型货币转换器。

我有两个下拉菜单将被选中，然后输入金额并进行转换。

我遇到的问题是将选项的值分配给我在Jquery中创建的变量。我可以最初分配它，但是当我选择新值时，它们不会被分配。费率通过AJAX引入，每个都有代码和金额 - 例如。

“费率”：{ “AUD”：0.10474， “BGN”：0.14495， }

到目前为止，我已经插入了一小段进展。我还在问题区域插入了评论。我还为JSON数据文件建立了一个链接。

任何帮助都将不胜感激。

代码 - 

var str = $.getJSON('http://api.fixer.io/latest?base=ZAR', {
    action: "query"
    , list: "search"
    , format: "json"
, }, 
    
    function (data) {
    var baseCurr = data.base;
    var baseDate = data.date;
    
    $('#curr-cont').append('<div class="base row1" id="row1"><div class="base flag" id="flag"><i class="famfamfam-flag-za"></i></div><div class="base country-name"><p class="c-name" id="count-name">' + baseCurr + '</p></div><div class="base currency"><p class="c-amount" id="curr">' + baseDate + '</p></div></div>');
    
    $.each(data.rates, function (i, item) {
        var amount = [item];
        var name = [i];
        var maxLength = 4;
        var string = amount.toString();
        string = string.substr(0, maxLength);
        // amount = amount.substr(0, maxLength);
        $('#curr-cont').append('<div class="row1" id="row1"><div class="flag" id="flag"><i class="famfamfam-flag-' + name + '"></i></div><div class="country-name"><p class="c-name" id="count-name">' + name + '</p></div><div class="currency"><p class="c-amount" id="curr">' + string + '</p></div></div>');
    });
    
    //***PROBLEM AREA***
    
    // set your new base currency
    var my_base="CAD";

    // set currency to convert to
    var my_destination="USD";

    // base amount to convert
    var amount=1;

    var converted_amount=(amount/data.rates[my_base])*data.rates[my_destination];
    
    for(var currency in data.rates) {
     if(currency===my_destination) {
    // perform conversions now
    }
    }
    
    $('#choice').change(function(){ 
        my_base = $('#choice').val();
        my_destination = $('#choice2').val();
        console.log(converted_amount.toFixed(2));
    });
    
    $('#choice2').change(function(){ 
        my_destination = $('#choice2').val();
        console.log(converted_amount.toFixed(2));
    });

    console.log(converted_amount.toFixed(2));
    
//    var keys = Object.keys(data.rates);
//    var half = Math.ceil(keys.length/2);
//    for(var i = 0;i<half;i++)
//    $('#list1').append('<li>' + keys[i] + '</li>');
//    
//    for(var i =half;i<keys.length;i++)
//    $('#list2').append('<li>' + keys[i] + '</li>');
    
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Currency Widget</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/styles.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
        <link rel="stylesheet" href="css/famfamfam-flags.css">
        <script src="http://code.jquery.com/jquery.min.js"></script>
    </head>
    <body>
        <div class="content-wrap">
            <div class="widget-wrap">
                <h1>Currency Widget</h1>
                <div class="currency-container" id="curr-cont">
                    
                </div>
            </div>
            
            <div class="cc-wrap">
                <h1>Currency Converter</h1>
                <div class="cc-container">
                    <ul class="cc-list" id="cc-list">
                        <li>
                           <select name="currencies" class="input-1" id="choice">
                               <option value="USD" title="United Arab Emirates Dirham">USD</option>
                               <option value="GBP" title="Afghan Afghani">GBP</option>
                               <option value="EUR" title="Albanian Lek">EUR</option>
                               <option value="AED" title="Armenian Dram">AED</option>
                               <option value="AUD" title="Armenian Dram">AUD</option>
                           </select>
                        </li>
                        
                        <li>
                            <span class="switch"></span>
                        </li>
                        
                        <li>
                           <select name="currencies" class="input-1" id="choice2">
                               <option value="IDR" title="United Arab Emirates Dirham">IDR</option>
                               <option value="CAD" title="Afghan Afghani">CAD</option>
                               <option value="CHF" title="Albanian Lek">CHF</option>
                               <option value="DKK" title="Armenian Dram">DKK</option>
                               <option value="HKD" title="Armenian Dram">HKD</option>
                           </select>
                        </li>
                        

                        <li><button class="go" id="go">GO</button></li>
                    </ul>
                </div>
                <div class="user-text-wrap" id="user-text-wrap">
                    <input name="user-text" class="user-text" id="user-text" type="textarea">
                    <span class="equals">=</span>
                    <input name="user-result" class="user-text" id="converted" type="textarea">
                </div>
            </div>
        </div>
        
    <!--SCRIPTS-->
        <script src="js/main.js"></script>
    </body>
</html>

JSON data file

1 个答案:

答案 0 :(得分：0)

将converted_amount转换为函数？

var str = $.getJSON('http://api.fixer.io/latest?base=ZAR', {
    action: "query"
    , list: "search"
    , format: "json"
, }, 
    
    function (data) {
    var baseCurr = data.base;
    var baseDate = data.date;
    
    $('#curr-cont').append('<div class="base row1" id="row1"><div class="base flag" id="flag"><i class="famfamfam-flag-za"></i></div><div class="base country-name"><p class="c-name" id="count-name">' + baseCurr + '</p></div><div class="base currency"><p class="c-amount" id="curr">' + baseDate + '</p></div></div>');
    
    $.each(data.rates, function (i, item) {
        var amount = [item];
        var name = [i];
        var maxLength = 4;
        var string = amount.toString();
        string = string.substr(0, maxLength);
        // amount = amount.substr(0, maxLength);
        $('#curr-cont').append('<div class="row1" id="row1"><div class="flag" id="flag"><i class="famfamfam-flag-' + name + '"></i></div><div class="country-name"><p class="c-name" id="count-name">' + name + '</p></div><div class="currency"><p class="c-amount" id="curr">' + string + '</p></div></div>');
    });
    
    //***PROBLEM AREA***
    
    // set your new base currency
    var my_base="CAD";

    // set currency to convert to
    var my_destination="USD";

    // base amount to convert
    var amount=1;

    var converted_amount=function(my_base,my_destination){ return (amount/data.rates[my_base])*data.rates[my_destination]; };
    
    for(var currency in data.rates) {
     if(currency===my_destination) {
    // perform conversions now
    }
    }
    
    $('#choice').change(function(){ 
        my_base = $('#choice').val();
        my_destination = $('#choice2').val();
        console.log(converted_amount(my_base, my_destination));
    });
    
    $('#choice2').change(function(){ 
        my_destination = $('#choice2').val();
        console.log(converted_amount(my_base, my_destination));
    });

    console.log(converted_amount(my_base, my_destination));
    
//    var keys = Object.keys(data.rates);
//    var half = Math.ceil(keys.length/2);
//    for(var i = 0;i<half;i++)
//    $('#list1').append('<li>' + keys[i] + '</li>');
//    
//    for(var i =half;i<keys.length;i++)
//    $('#list2').append('<li>' + keys[i] + '</li>');
    
    
});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Currency Widget</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/styles.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
        <link rel="stylesheet" href="css/famfamfam-flags.css">
        <script src="http://code.jquery.com/jquery.min.js"></script>
    </head>
    <body>
        <div class="content-wrap">
            <div class="widget-wrap">
                <h1>Currency Widget</h1>
                <div class="currency-container" id="curr-cont">
                    
                </div>
            </div>
            
            <div class="cc-wrap">
                <h1>Currency Converter</h1>
                <div class="cc-container">
                    <ul class="cc-list" id="cc-list">
                        <li>
                           <select name="currencies" class="input-1" id="choice">
                               <option value="USD" title="United Arab Emirates Dirham">USD</option>
                               <option value="GBP" title="Afghan Afghani">GBP</option>
                               <option value="EUR" title="Albanian Lek">EUR</option>
                               <option value="AED" title="Armenian Dram">AED</option>
                               <option value="AUD" title="Armenian Dram">AUD</option>
                           </select>
                        </li>
                        
                        <li>
                            <span class="switch"></span>
                        </li>
                        
                        <li>
                           <select name="currencies" class="input-1" id="choice2">
                               <option value="IDR" title="United Arab Emirates Dirham">IDR</option>
                               <option value="CAD" title="Afghan Afghani">CAD</option>
                               <option value="CHF" title="Albanian Lek">CHF</option>
                               <option value="DKK" title="Armenian Dram">DKK</option>
                               <option value="HKD" title="Armenian Dram">HKD</option>
                           </select>
                        </li>
                        

                        <li><button class="go" id="go">GO</button></li>
                    </ul>
                </div>
                <div class="user-text-wrap" id="user-text-wrap">
                    <input name="user-text" class="user-text" id="user-text" type="textarea">
                    <span class="equals">=</span>
                    <input name="user-result" class="user-text" id="converted" type="textarea">
                </div>
            </div>
        </div>
        
    <!--SCRIPTS-->
        <script src="js/main.js"></script>
    </body>
</html>

相关问题
最新问题