如何在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中創建一個簡單的計算

回答

相關問題