Question

我有一个jQuery函数，用于计算用户输入的数字，并在新的只读输入中输出结果。下面的代码显示了我正在使用的脚本，但该表单仅用于说明目的，因为真实表单有12个或更多这些输入。我的问题是，有没有办法让我的一个脚本对所有不同的输入进行所有计算？或者，我是否必须为每组写出12个或更多这些脚本？

<html>
<head>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

<script type='text/javascript'>//<![CDATA[

$(window).load(function(){
$(':input').bind('keypress keydown keyup change',function(){
    var pp_result = parseFloat($(':input[name="pp_month_result"]').val(),10),
        pp_goal = parseFloat($(':input[name="pp_month_goal"]').val(),10);

    var day = "<?php echo date('d'); ?>";
    var monthDays = "<?php echo date('t'); ?>";

    var v = '';
    if (!isNaN(pp_result) && !isNaN(pp_goal)){
        v = parseFloat((pp_result) / (day) * (monthDays) / (pp_goal) * 100).toFixed(0)+"%";
    }
    $(':input[name="pp_month_trend"]').val(v.toString());
});
});//]]>  

</script>
</head>

<body>

<form>
    Result 1 <input type="text" name="pp_month_result"><br>
    Goal 1 <input type="text" name="pp_month_goal"><br>
    Trend 1 <input type="text" name="pp_month_trend" readonly>

    Result 2 <input type="text" name="aa_month_result"><br>
    Goal 2 <input type="text" name="aa_month_goal"><br>
    Trend 2 <input type="text" name="aa_month_trend" readonly>
</form>


</body>
<html>

我之前没有说明的问题是第二组输入具有不同的名称，因此可以将它们发布到单独的PHP文件中。

            <div>
        <tr>
        <td>POST</td>
        <td>
        <input type="text" name="pp_today_result" class="numbox">
        </td>
        <td>
        <input type="text" name="pp_today_goal" class="numbox">
        </td>
        <td style="padding: 0 0 0 10px; border-left: 1px solid #D6D6D6;">
        <input type="text" name="pp_month_result" class="numbox">
        </td>
        <td style="padding: 0 0 0 5px;">
        <input type="text" name="pp_month_goal" class="numbox">
        </td>
        <td style="padding: 0 0 0 5px;">
        <input type="text" name="pp_month_trend" class="numbox" readonly>
        </td>
        </tr>
        </div>

我的输入在上面显示的表格中，这是什么阻止了建议的解决方案为我工作？

Answer 1

使用容器对元素进行分组，以便您可以轻松找到相关的输入元素

<form>
    <div>
        Result 1 <input type="text" name="pp_month_result"/><br/>
        Goal 1 <input type="text" name="pp_month_goal"/><br/>
        Trend 1 <input type="text" name="pp_month_trend" readonly />
    </div>
    <div>
        Result 2 <input type="text" name="pp_month_result"/><br/>
        Goal 2 <input type="text" name="pp_month_goal"/><br/>
        Trend 2 <input type="text" name="pp_month_trend" readonly />
    </div>
</form>

然后

$(window).load(function(){
    $(':input').bind('keypress keydown keyup change',function(){
        var $div = $(this).closest('div');
        var pp_result = parseFloat($div.find(':input[name$="_month_result"]').val(),10),
            pp_goal = parseFloat($div.find(':input[name$="_month_goal"]').val(),10);

        var day = 5;
        var monthDays = 2;

        var v = '';
        if (!isNaN(pp_result) && !isNaN(pp_goal)){
            v = parseFloat((pp_result) / (day) * (monthDays) / (pp_goal) * 100).toFixed(0)+"%";
        }
        $div.find(':input[name$="_month_trend"]').val(v.toString());
    });
});

演示：Fiddle

使用一个脚本从表单输入处理多个计算

1 个答案: