Question

我正在构建一个货币兑换应用程序并且我已经完成了基本功能，但问题是如果我在不更改基础货币输入值的情况下更改目标货币，则目标货币不会更新。我喜欢它，所以当我更改第二个元素中的任何值时，它会根据基本输入中的内容自动重新计算速率。

这是我第一次提出关于SO的问题，所以要温和。

谢谢。

您可以在此处找到该项目：https://codepen.io/azdravkovski/pen/BddLeQ?editors=0010

let categories = [
    { id: 5, slug: 'category-5', items: []  },
    { id: 4, slug: 'category-4', items: []  },
    { id: 3, slug: 'category-3', items: []  },
]

let items = [
    { id: 5, data: [{ title: 'item title', description: 'item description' }] },
    { id: 5, data: [{ title: 'item title 2', description: 'item description 2' }] },
    { id: 4, data: [{ title: 'item title 4', description: 'item description 4' }] },
]

categories.forEach(function(e) {
  var i = items.filter(a => a.id == e.id).map(a => a.data);
  e.items = i;
})

console.log(categories)

和html：

    $(document).ready(function () {

    //First AJAX call populates dropdown
    $.ajax({
        url: 'https://api.fixer.io/latest?',
        success: function(data) {
            var currencyNoBase = Object.keys(data.rates);
            var currencyWithBase = currencyNoBase.concat(data.base).sort();
            //Populate dropdown lists with currency names
            $.each(currencyWithBase, function (val, text) {
                $('.currencies').append($('<option />').val(val).html(text));
            });
            //Set default currencies in base and target
            $('#base').val('8');
            $('#target').val('30');
        },
        dataType: 'json'
    });

    //return selected base currency
    $('#curr1').on('input', function() {
        var base = $('#base option:selected').text();
        var url = 'https://api.fixer.io/latest?base=' + base;

//      Second AJAX call sets base currency
        $.ajax({
            url: url,
            success: function(data2) {
                var target = $('#target option:selected').text();
                var curr1 = $('#curr1').val();
                var curr2 = $('#curr2').val();
                var converted = curr1 * data2.rates[target];

                $('#curr2').val(converted.toFixed(2));
                console.log(converted);

                //Clear input fields when changing currency
                $('#base').on('change', function() {
                    $('#curr1').val('');
                    $('#curr2').val('');
                })
            },
            dataType: 'json'
        });

    });

Answer 1

您的代码主要在那里，我添加了 jQuery＆＃39;更改＆＃39;事件到目标货币选项，并且大小重复第二个ajax调用代码。这导致我理解你想要的其他行为。

JS小提琴：https://jsfiddle.net/2Tokoeka/Lyxwkux1/

附加代码：

// Event recognition for target currency option change
  $('select#target').on('change', function() {
    var base = $('#base option:selected').text();
    var url = 'https://api.fixer.io/latest?base=' + base;

  // Second AJAX call sets base currency
    $.ajax({
        url: url,
        success: function(data2) {
            var target = $('#target option:selected').text();
            var curr1 = $('#curr1').val();
            var curr2 = $('#curr2').val();
            var converted = curr1 * data2.rates[target];

            $('#curr2').val(converted.toFixed(2));
            console.log(converted);
        },
        dataType: 'json'
    });
  });

在您准备好时合并代码方面，您还可以将第二个AJAX调用作为单独的函数并为每个事件调用它，并提取代码部分，以便在更改基础货币时清除代码进入自己的街区。这在上面链接的JS-Fiddle中显示。

在选择下拉选项时需要帮助更新输入字段

1 个答案: