如何在jquery中创建一个简单的计算

Posted 2023-05-09

【中文标题】如何在jquery中创建一个简单的计算

【英文标题】：How to create a simple calculation in jquery

【发布时间】：2014-06-08 03:41:08

【问题描述】：

我是 jQuery 新手，这将变得非常明显。

我正在尝试通过将 jquery 应用到小创意中来学习它。

在这种情况下，它是统计中的 Z 分数公式。

z = x-mu/sigma

这是我在 jquery 代码中的处理方式。

$(document).ready(function() 

    var x = $('input[name="xValue"]').val();
    var mu = $('input[name="muValue"]').val();
    var sig = $('input[name="sigmaValue"]').val();
    var total = x - mu / sig;

    function calculate() 
        $('.result').html(total);
    
);

我捕捉到的一个概念是将您的值存储在变量中，然后以这种方式操作它们。

我正在苦苦挣扎的是下一步该怎么做。在这种情况下，我想在触发事件（onclick）时输出结果。

这是我的标记：

<section class="formula">
    <div class="z"></div>
    <div class="x">
    <input id="xValue" type="text" name="x" autofocus>
    </div>
    <div class="mu">
        <input id="muValue" type="text" name="mu">
    </div>
    <div class="sigma">
        <input id="sigmaValue" type="text" name="sigma">
    </div>
    <div class="result"></div>
    <button onclick="calculate()">Calculate</button>
</section>

【问题讨论】：

不要在文档就绪处理程序中嵌套 calculate() 函数，您在这里面临范围界定问题。当然，你的计算变量也应该在 calculate() 函数中

jsfiddle.net/arunpjohny/k6X5C/1

@ArunPJohny 很棒的小提琴，谢谢，这也是一个可靠的方法，这只是一个匿名函数吗？我知道这怎么可能只是一个可以由所有具有 .calculate 类的对象运行的函数，您认为这是一种好的做法还是为您的函数命名总是更好？不知道如何在我的脑海中定义这两个基础。

【参考方案1】：

你可以这样做： 将您的 html 更改为：

...
<button onclick="calculate()">Calculate</button>
...

到

..
<button type="button" class="calculate">Calculate</button>
....

在 js 中，一个类为calculate 的按钮的点击处理程序：

$(document).ready(function() 
    $(".calculate").click(function() 
        var x = $('input[name="x"]').val();
        var mu = $('input[name="mu"]').val();
        var sig = $('input[name="sigma"]').val();
        var total = x - mu / sig;
        $('.result').html(total);    
    );
);

演示jsFiddle

【讨论】：

这通常比内联脚本 +1 更好（建议）

@Sudhir 你的小提琴完美地展示了我做错了什么，感谢你解释正确的方法。感谢 A. Wolff 的后续评论

@Sudhir 在您看来，假设仅需要在一个实例中使用此代码，是否有必要为该函数命名，使其成为匿名函数，或者将其包装在文档中。不需要的 ready 函数我的意思是它可能只是没有在 script.js 文件中准备好的文档。谢谢。

@MARS 它不需要函数...包装在 doc ready 中就足够了.. 只要您可以确认 jquery 可用 om 页面，您就可以将代码添加到一些 js 文件中

【参考方案2】：

好吧，我想在这里指出几个错误。

首先，将您的计算逻辑包装在 calculate 函数中，如下所示。

    function calculate() 
     var x = $('input[name="xValue"]').val();
     var mu = $('input[name="muValue"]').val();
     var sig = $('input[name="sigmaValue"]').val();
     var total = x - mu / sig;
     $('.result').html(total);

接下来，您将选择名称为 xValue 的 input，但在您的 html 中，它的名称仅为 x。更改其名称或使用选择器input[id="xValue" 或$("#xValue").val()"

最后，当您使用 jQuery 时，最好避免使用内联脚本。 使用

$("#calculateButtonID").click(function()
    //calculate logic here...
);

JsFiddle

【讨论】：

感谢您指出错误并在包装计算函数和不使用内联脚本方面提供了这 2 个非常好的提示。

【参考方案3】：

试试这个：

 $("#btncalc").on('click', function() 
   event.preventDefault();
   var x = parseInt($("#xValue").val());        
    var mu = parseInt($("#muValue").val());
    var sig =parseInt($("#sigmaValue").val());
    var total1 = x - (mu / sig);
    alert(total1);           
    $('div.result').html(total1);

);

Fiddle