Trying to get currency converter to work using jQu

2019-09-11 11:52发布

站内问答 / JavaScript
1967 2 4

I'm working on a project using jQuery to make a currency converter. I'm getting the currency info from an api service and loading it up in a table with multiple currencies. After which, I want to be able to enter a number in one input and make the other inputs produce the correct currency according to the entered input.

As you can see in the following code, I'm trying to make the keyup function work on everything but the input of which the numbers are being entered at that moment. My output result from the function is also incorrect.

If anyone can point out the very obvious mistake I'm making here that would be very helpful!

JS:

function parseCurrency(data) {
var container = $('.currency-data');

var iskInput = $('<tr>' +'<td>' + '<strong>ISK</strong>' + 
    '</td> ' + '<td>' + 'Íslensk króna' + 
    '</td>' + '<td></td>' + '<td>' + '1' + '</td>' + 
    '<td>' + '<input value="1000" class="input-value"></input>' + '</td>' + 
    '</tr>'); 
iskInput.prependTo(container);

$.each(data.results, function (key, currency){
    var row = [];
    row = $('<tr></tr>');
    row.append('<td>' + '<strong>' + currency.shortName + '</strong>' + '</td>');
    row.append('<td>' + currency.longName + '</td>');
    row.append('<td>' + currency.changeCur + '</td>');
    row.append('<td>' + currency.value + '</td>');
    var input = $('<input class="input-value"></input>');
    input.val((1000/currency.value).toFixed(2));
    var td = $('<td></td>');
    input.appendTo(td);
    td.appendTo(row);
    container.append(row);
})
var inputValue = $('.input-value');
var inputActive = $('.input-value:focus')

$.each(data.results, function (key, currency) {
    inputValue.not(inputActive).keyup( function () {
        inputValue.val((inputValue.val()/currency.value ).toFixed(2));
    });
})
}

HTML:

<form name="converter"></div>
        <h4>Collecting data from: <a href="" class="m5">m5</a> <a href=""      class="arion">A bank</a> <a href="" class="lb">Lb</a></h4>
        <div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Obj1</th>
                        <th>Obj2</th>
                        <th>Obj3</th>
                        <th>Obj4</th>
                        <th>Obj5</th>
                    </tr>
                </thead>
                <tbody class="currency-data">
                </tbody>
            </table>
            <div class="loader lead" style="display:none;">Loading...</div>         
        </form>

2条回答
劳资没心，怎么记你
2楼-- · 2019-09-11 12:23

That's a bit strange for me, because you select all the input field which are NOT focused, and in the keyup eventhandler you just work with the inputValue variable, which contains the focused input element too. By the way, you shouldn't iterate two times on the data.results. As charlietfl commented before it does not make any sense to put the bindings to the iteration. That's a big mistake also.

查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
3楼-- · 2019-09-11 12:26

A simple Method

            <html>
        <head>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
         <script>
        function changeTo(toType){
        
          
          if(toType=="Pound")
                cvrate = 0.86;
          else
                cvrate = 0.78;      
                
                        
          $(".currency_change").each(function (index, element) {
               var og_val  = $(this).data("og-value");
               var cvd_val = (og_val*cvrate).toFixed(2);
               return $(this).html(cvd_val);  
            });
            }
        </script>  
        
        </head>
        <body>
        <br /><span class="currency_change" data-og-value="1254">1254</span>
        <br /><span class="currency_change" data-og-value="145">145</span>
        <br /><span class="currency_change" data-og-value="54">54</span>
        <br /><span class="currency_change" data-og-value="254">254</span>
        <br /><span class="currency_change" data-og-value="147">147</span><br />
        <button onClick="changeTo('Pound');">Conver To Pound</button>
        <button onClick="changeTo('Euro');">Conver To Euro</button>
        </body>
        </html>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)