尝试使用 jQuery 让货币转换器工作答案

【问题标题】：Trying to get currency converter to work using jQuery尝试使用 jQuery 让货币转换器工作
【发布时间】：2015-10-16 19:35:48
【问题描述】：

我正在使用 jQuery 制作货币转换器的项目。我从 api 服务获取货币信息并将其加载到具有多种货币的表中。之后，我希望能够在一个输入中输入一个数字，并使其他输入根据输入的输入生成正确的货币。

正如您在下面的代码中看到的，我正在尝试让 keyup 函数对所有内容都起作用，但此时正在输入数字的输入除外。我的函数输出结果也不正确。

如果有人能指出我在这里犯的非常明显的错误，那将非常有帮助！

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>

【问题讨论】：

您能提供一个工作示例吗？很难确切地看到你在做什么
在循环中绑定输入 keyup 将用于复合事件处理程序，最后一个事件处理程序将占上风。您将多个处理程序绑定到每个元素，而不是在每次迭代中定位您想要的那个
您似乎描述了一个货币换算表，它将以任何货币输入的值转换为表中存在的所有其他货币。但是对于每种货币，您只知道往返伊斯伦斯克克朗的汇率。因此，您的问题有两个部分：（a）设计一个通用公式，允许根据您拥有的数据进行任意转换； (b) 对该通用公式进行编码。顺便说一句 - 一旦你了解它，它实际上非常简单。

标签： javascript jquery html converter currency

【解决方案1】：

这对我来说有点奇怪，因为您选择了所有未聚焦的输入字段，并且在 keyup 事件处理程序中您只需使用 inputValue 变量，该变量也包含聚焦的输入元素。顺便说一句，您不应该对 data.results 进行两次迭代。正如 charlietfl 之前评论的那样，将绑定放入迭代没有任何意义。这也是一个大错误。

【讨论】：

【解决方案2】：

一个简单的方法

            <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>

【讨论】：