Question

我有现有的乘法代码

 <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 shares2的第二个输入？我的代码很乱。

Answer 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/

Answer 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。

Jquery实时乘法显示结果

2 个答案: