Question

我有这个脚本：

此时它仅适用于第一个字段。它像：文本字段中的数字*下拉的跨度值=其他货币的结果如何重新排列脚本以使其与多个下拉列表一起工作，因此它将起作用（数字*跨度值）+（数字*跨度值）并将其显示为一个结果？（总结）

jQuery的：

$(document).ready(function () {
    function showTab(name) {
        $('div.fruit').hide();
        var $div = $('#' + name).show();
        var number = parseInt($('.number').val(), 0);
        $('span', $div).each(function () {
          $(this).text(($(this).data('val') * number).toFixed(3));
        });
    }

    $('#update').click(function() { 
        showTab($('#dropdown').val());
    });

    showTab($('#dropdown').val());
});

Answer 1

好吧，首先，这绝不是最好的方法。我对答案采取了很多自由，并对值进行了硬编码。

<强> Live Demo

我稍微清理了一下html，但主要是只修改了JavaScript。

我做的第一件事就像我说硬编码的价值。

var fruits = {
    apple: {
        apple: 1,
        banana: 0.5,
        pineapple: 8
    },
    banana: {
        apple: 2,
        banana: 1,
        pineapple: 16
    },
    pineapple: {
        apple: 0.125,
        banana: 0.0625,
        pineapple: 1
    }
};

现在我个人会让你的HTML更容易阅读并通过JS迭代来动态创建对象。当然，如果您期望服务器提供不同的值，而仅方式是出于某种原因通过HTML数据属性获取它们。

我接下来要做的就是将点击事件更改为以下内容。

   var vals = {
        apple: 0,
        banana: 0,
        pineapple: 0
    };

    $('.dropdown').each(function () {
        var fruitVal = $(this).prev('.number').val();
        if (fruits[$(this).val()]) {
            vals.apple += fruitVal * fruits[$(this).val()].apple;
            vals.banana += fruitVal * fruits[$(this).val()].banana;
            vals.pineapple += fruitVal * fruits[$(this).val()].pineapple;
        }
    });

    $('.apple').text(vals.apple);
    $('.banana').text(vals.banana);
    $('.pineapple').text(vals.pineapple);

我再次根据之前收到的数据动态制作vals对象。我会迭代fruits对象的顶级属性来创建它。

在我看来，有两个计算按钮很奇怪。另外我讨厌使用prev来获取一个值，但你没有为输入分配类，所以基本上没有办法引用属于下拉列表的输入。

无论如何，一旦你得到了价值，它就归结为基本数学。如果您有任何问题随时问。

将单个下拉计算器升级到多个下拉列表

1 个答案: