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

Upgrade single dropdown calculator to multiple dropdown

本文关键字：下拉列表 单个 计算器      更新时间：2023-09-26

我有这个脚本：

更新的小提琴：http://jsfiddle.net/EfYev/4/

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

j查询：

$(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());
});
好吧，

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

现场演示

我稍微清理了一下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对象。我会迭代水果对象的顶级属性来创建它。

在我看来，有两个计算按钮很奇怪。我也讨厌使用 prev 来获取值，但是您没有为输入分配类，因此基本上无法引用哪个输入属于哪个下拉列表。

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

相关文章：