0

我正在尝试制作一个基于加权输入生成值的表单。例如，如果我们在数据库中有以下内容

**Item**   _|_**Weight**
sink        | 1.5
toilet      | 2.5
shower      | 3

一个看起来像这样的表单，使用 AJAX 从数据库构建（必须使用 AJAX 构建，因为输入的名称和输入的数量取决于用户在表单前一部分中的选择）

<form id="calculator">
...There are several field sets here...
    <fieldset id="myFields">
        <input type="text" class="iteminput" data-weight="1.5" name="sink" id="sink">
        <input type="text" class="iteminput" data-weight="2.5" name="toilet" id="toilet">
        <input type="text" class="iteminput" data-weight="3" name="shower" id="shower">
    </fieldset>
</form>

如果用户输入他们有 X 个水槽、Y 个马桶和 Z 个淋浴器，我想自动计算他们的管道系统的总“价值”，在这种情况下，X*1.5+Y*2.5+Z*3。

我挂断的地方是如何获得每个输入的值。我想要做的是遍历#myFields 中的所有输入，获取字段的值以及数据权重属性的值，将它们相乘，然后将它们添加到运行总数中。我想在每个输入的 onKeyUp 事件附加的函数中完成所有这些操作。

任何帮助表示赞赏，如有必要，可以提供更多信息。

仅 Javascript 的解决方案是最好的，但如果它大大简化了答案，我不反对使用 jQuery。

4

2 回答 2

1

这是一个 jQuery 示例：

您应该能够获得模糊函数的输入值。然后通过在输入上运行 each 函数来更新值。像这样的东西...

<ul>
    <li>
        <label>Number of X</label>
        <input type="text" value="" id="x"/>
    </li>
    <li>
        <label>Number of Y</label>
        <input type="text" value="" id="y"/>
    </li>
    <li>
        <label>Number of Z</label>
        <input type="text" value="" id="z"/>
    </li>
</ul>

<p>Total is: <span class="total"></span>

jQuery：

$('input').blur(function () {
    var total = 0;
    $('input').each(function() {
        total += Number($(this).val());
    });

    $('.total').text(total);
});

演示：

http://jsfiddle.net/DYzsR/1/

于 2013-06-18T21:22:34.933 回答
0

这就是我最终做的。

function calcFixtures()
{
    var elements = [];
    var total = 0;
    elements = document.getElementsByClassName('fixtureinput');
    for (var i=0; i<elements.length; i++) {
        total += elements[i].value * elements[i].getAttribute("data-weight");
    }
}

逻辑是，获取具有特定类的所有元素，循环遍历它们，对于每个元素，获取 data-weight 属性的值并将其乘以该元素的当前表单值。感谢@Kris 提出将其作为运行总计而不是单个计算的想法。那真的是突破点。

于 2013-06-20T20:24:41.743 回答