2012-11-29 5 views
6

EDITEDjqueryの:二つの数字

の割合は、サポートを提供し、誰もいただきありがとうございます...私は同じソリューションを探している人を助けることができることを期待してあなたと共有する最良の作業スクリプトを:

$(document).ready(function(){ 
$("#price1, #price2").keyup(function() { 
    var priceOne = parseFloat($("#price1").val()); 
    var priceTwo = parseFloat($("#price2").val()); 
    var rate = parseFloat($("#rate").val()); 
    if ($("#price1").val() && $("#price2").val()){  
    $('#rate').val(((priceTwo - priceOne)/priceOne * 100).toFixed(2)); 
} 

}); 

$("#rate").keyup(function() { 
    var priceOne = parseFloat($("#price1").val()); 
    var rate = parseFloat($("#rate").val()); 

    if ($("#rate").val() && $("#price1").val() && $("#price2").val()){ 
$('#price2').val(((priceOne * rate)/ 100 + priceOne).toFixed(2)); 
} 
}); 
}) 

また、あなたは、私がこのLINK


次それをテストすることができますNITIAL QUESTION:

2つの数字の割合を計算するのに役立ちます。私は片方向を試みましたが、成功しませんでした。間違っているものを私に教えて、またはあなたが私

私のスクリプトを助けることができる他のスクリプトをお勧めすることができます場合、私は理解するだろうしてください:

<html> 
<head> 
<script type="text/javascript"> 
$("#rate").text(function() { 
    var result = (parseInt(($("#price1").text(), 10) * 100)/ parseInt($("#price2").text(), 10)); 
    if (!isFinite(result)) result = 0; 
    return result; 
});? 
</script> 

</head> 
<body> 
<div id="price1"><label><input id="price1" type="text"></label></div> 
<div id="price2"><label><input id="price2" type="text"></label></div> 
<div id="rate"><label><input id="rate" type="text"></label></div> 


</body> 
</html> 
+0

なぜ 'を?'持っていましたか?おそらくTypoの問題です。 –

+0

申し訳ありませんが、おそらくそれは間違っています、私はこのフィールドに新しいです –

+0

私はまた新しい..私はあなたが他のサイトからコピーしたと思う** '隠された**特殊文字.. '?'を取り除くとうまくいくでしょう:)また、adilの答えをチェックしてください。 –

答えて

8

使用val()の代わりtext()によって入力値を取得し、 $(function(){})を使用してDOMを待ちます準備ができました。また、同じIDを要素に使用しないでください。

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#price1, #price2").change(function() { // input on change 
    var result = parseFloat(parseInt($("#price1").val(), 10) * 100)/ parseInt($("#price2").val(), 10); 
    $('#rate').val(result||''); //shows value in "#rate" 
    }) 
}); 
</script> 
</head> 
<body> 
<div id="price-div1"><label>price1</label><input id="price1" type="text"></div> 
<div id="price-div2"><label>price2</label><input id="price2" type="text"></div> 
<div id="rate-div"><label>rate</label><input id="rate" type="text">%</div> 
</body> 
</html> 
+0

ありがとう!それは本当に私を助ける!!! –

+0

@Dhamuありがとう! – mattn

1

あなたはparseFloatはを(使用したいてもよい)代わりにのparseInt ()

<div id="price-div1"></label>price1<label><input id="price1" type="text"></div> 
    <div id="price-div2"></label>price2<label><input id="price2" type="text"></div> 
    <div id="rate-div"><label>rate</label><input id="rate" type="text">%</div> 

    <script type="text/javascript"> 
     $(function() { 
      $("#price1, #price2").change(function() { 
       var result = parseFloat(parseFloat($("#price1").val(), 10) * 100)/ parseFloat($("#price2").val(), 10); 
       $('#rate').val(result||''); 
      }) 
     }); 
    </script> 
+0

こんにちは、私を助けてくれてありがとう。私はまだDIVで受け取っていないナッツを試しましたが、結果はどれも –

3

あなたは、いくつかの問題を抱えている、

  1. ?テキスト関数の括弧を閉じた後。固定
  2. テキストの代わりに使用すると、テキストボックスに入力をしたいなら、あなたはヴァルを(使用する必要がありますdiv要素とテキストボックス
  3. 両方のID price1とprice2を繰り返し
  4. )()

あなたは

Live Demoをコーディング

HTML

<div id="dprice1"><label><input id="price1" type="text" value="80" /></label></div> 
<div id="dprice2"><label><input id="price2" type="text" value="100" /></label></div> 
<div id="drate"><label><input id="rate" type="text"></label></div> 
<input id="btnCal" type="button" value="Calculate"> 

Javascriptのこのような

$("#btnCal").click(function() { 
    $("#rate").val(function() { 
     var result = parseInt($("#price1").val()) * 100/parseInt($("#price2").val()); 
     if (!isFinite(result)) result = 0; 
     return result; 
    }); 
});​ 
+0

ありがとうございました。しかし、まだ結果はありません:( –

+0

もう少し修正があります... – Adil

+0

あなたのコードを修正し、ライブデモを追加しました。 – Adil

1

使用、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<script type="text/javascript"> 
$("#rate").text(function() { 
    var result = (parseFloat(($("#price1").val(), 10) * 100)/ parseFloat($("#price2").val(), 10)); 
    if (!isFinite(result)) result = 0; 
    return result; 
}); 
</script> 
<body> 
<div class="price1"><label><input id="price1" type="text"></label></div> 
<div class="price2"><label><input id="price2" type="text"></label></div> 
<div class="rate"><label><input id="rate" type="text"></label></div> 
</body> 
</html> 

変更のdivクラス、および入力要素のためのval()

2

チェックこのフィドル

http://jsfiddle.net/j3WY3/5/

は、いくつかの修正を行っている:誰もが言うように

  • ?を削除しました。 .val()
  • 両方divinputから
  • 変更.text()は、スクリプトタグの最後の行に同じid