2012-11-29 11 views
6

EDITEDjQuery: Odsetek dwóch liczb

Dziękuję wszystkim, którzy oferowanego wsparcia ... najlepszy scenariusz pracy będę dzielić się z wami w nadziei, że mogę pomóc innym, kto szuka tego samego roztworu:

$(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)); 
} 
}); 
}) 

Ponadto można przetestować go po tym LINK


I PYTANIE ZAGRANICZNE:

Proszę pomóc obliczyć procent pomiędzy dwiema liczbami. Próbowałem w jedną stronę, ale mi się nie udało. Proszę mi powiedzieć, co jest nie tak, czy będę wdzięczny, jeśli można polecić inny scenariusz, który mógłby mi pomóc

mój skrypt:

<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

dlaczego '?' W ostatnim wierszu tagu skrypt? może problem z Typo .. –

+0

Przepraszam, może tam jest źle, jestem nowy w tej dziedzinie –

+0

Jestem też nowy .. Myślę, że skopiowałeś z innych stron, które generują ** 'ukryte' ** znaki specjalne .. usuń '?' i może to zadziała :) sprawdź także odpowiedź Adila. –

Odpowiedz

8

użytku val() zamiast text() do elementu wejściowego, użyj $(function(){}), aby czekać na DOM gotowy. I nie używaj tego samego identyfikatora do elementów.

<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

dziękuję! to naprawdę mi pomoże –

+0

@Dhamu dziękuję! – mattn

1

Może chcesz użyć parseFloat() zamiast 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

Cześć dziękuję za twoją próbę pomocy. Próbowałem nakrętkę nadal nie otrzymują w DIV gdzie jest RATE każdy wynik –

3

masz kilka problemów,

  1. ? po zamknięciu nawiasu funkcji tekstowej.
  2. Powtarzające cena1 id i price2 dla obu div i pola tekstowe
  3. Jeśli chcesz wejściowe z pola tekstowego należy użyć val() zamiast tekstu()

Fixed ci kodu

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

thanks', ale nadal nie każdy wynik :( –

+0

Istnieje kilka innych poprawek ... – Adil

+0

mam stałe swój kod i dodał demo na żywo. – Adil

1

Zastosowanie tak,

<!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> 

Zmieniono div class i uzyskać wartość wprowadzana przez val()

Powiązane problemy