jquery实时乘法显示结果答案

【问题标题】：Jquery real-time multiplication display resultjquery实时乘法显示结果
【发布时间】：2014-01-24 00:47:24
【问题描述】：

我有我现有的乘法代码

 <label>Number of Shares:</label><input name="shares" id="shares" type="text" />
    <input name="shares2" id="shares2" type="text" />
    <br />
    Total Value: &euro; <span id="result"></span>

这是我的脚本

$("#shares").keyup(function()
$("#shares2").keyup(function()  
                   {
   var val1 = parseFloat($(this).val());
   var val2 = parseFloat($(this).val());

   val3 = (val ? val * val2 : "Invalid number");
   $("#result").text(val3);

})

如何在脚本中添加 ID 为 share2 的第二个输入？我的代码一团糟。

【问题讨论】：

标签： javascript jquery real-time

【解决方案1】：

我写了这个，我认为它可以满足您的需求：

var multiplyShares = function() {
    var val1 = parseFloat($('#shares').val())
    var val2 = parseFloat($('#shares2').val())

    val3 = val1 * val2 || "Invalid number"
    $("#result").html(val3)
}
$("#shares").keyup(function() { multiplyShares(); });
$("#shares2").keyup(function() { multiplyShares(); });

这是它工作的一个例子。让我知道这是否有帮助：

http://jsfiddle.net/8dhME/

【讨论】：

【解决方案2】：

好的，我要走了，所以我稍后再解释一下，但试试这个：

<html>
<head>
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){

        $(".js-calc").keyup(function(){

            var val1 = parseInt($("#shares").val());
            var val2 = parseInt($("#shares2").val());

            if ( ! isNaN(val1) && ! isNaN(val2))
            {
                 $("#result").text(val1 + val2);
            }
        });

    });

    </script>
</head>
<body>

<form>
    <label>Number of Shares:</label>
    <input class="js-calc" name="shares" id="shares" type="text" />
    <input class="js-calc" name="shares2" id="shares2" type="text" />
</form>

<br />
Total Value: &euro; <span id="result"></span>

</body>
</html>

请注意，我将class="js-calc" 放在输入元素上，因此我们只需要定位类，而不是两个 ID。

【讨论】：