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

我是jQuery的新手，这将变得非常明显。如何在jQuery中创建一个简单的计算

我试图通过将它应用于小想法基本学习jquery。

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

Z = X-MU /西格玛

下面的是我如何接近它在我的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>

来源

2014-04-23 MARS

做准备的文档处理程序中不能嵌套计算（）函数，你在这里面临的一个作用域的问题。当然，你的计算变量应该在里面calculate（）函数中也是 –

http://jsfiddle.net/arunpjohny/k6X5C/1/ –

@ArunPJohny很好的小提琴，谢谢你这也是一个可靠的方法，难道这只是一个匿名函数，我看到这可能只是一个函数，可以通过一个.calculate类的所有对象运行，你认为这是一个好的做法，或者它总是更好地命名你的函数？不知道如何在我的脑海中定义两个基地。 – MARS

你可以做这样的：您的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

来源

2014-04-23 10:53:18

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

@Sudhir你的小提琴完全展示我做错了什么，感谢你解释正确的方法来做到这一点。感谢A. Wolff后续提交 – MARS

@Sudhir在你看来，假设这个代码只需要在一个实例中使用，那么有必要给这个函数一个名字，使它成为一个匿名函数，或者只是将它保留在doc.ready函数，它不需要是我的意思是它也可以在script.js文件中没有准备好文档。谢谢。 – MARS

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

首先，将您的计算逻辑包含在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); 

}

接下来，你选择你的input与名xValue但在你的HTML它的名字是唯一x。要么更改其名称或使用选择input[id="xValue"或$("#xValue").val()"

最后，当你使用jQuery它能够更好地避免内嵌脚本。使用

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

JsFiddle

来源

2014-04-23 11:04:14 Navin

谢谢你指出错误并给予那些包装计算功能和不使用内联脚本的2个非常好的技巧。 – MARS

试试这个：

$("#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

来源

2014-04-23 11:21:28

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

回答

相关问题