如何在jQuery中創建一個簡單的計算

Question

我是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>

Answer 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

Answer 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

Answer 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);

});

小提琴