1

選択した特定の基準に基づいて価格を計算するフォームを作成しました。スタンドアローンのプログラムとしてはうまく機能しますが、残念ながら何らかの理由でコードをテーブルの個別のセルに入れると機能しなくなり、取得できる唯一の方法です最終的な結果は、ブラウザを更新したときです...これを修正する方法については、以下のコードを参照してください。

<td>&</td>を取り出すと正常に動作します

<!DOCTYPE html>
<head>
<TITLE>test</TITLE>
<script src="javascript/jquery-2.0.0b1.js"></script>
<link rel="stylesheet" href="css/domain-name-price-guide-table.css" />
</head>
<body>
<div class="datagrid">
<form id="buy">
<table>
<thead>
</thead>
<tbody>
<tr>
<td>
    <select name="years">
        <option value="4.49">1 Year</option>
        <option value="6.49">2 Years</option>
        <option value="9.47">3 Years</option>
        <option value="12.47">4 Years</option>
        <option value="15.45">5 Years</option>
        <option value="18.44">6 Years</option>
        <option value="21.43">7 Years</option>
        <option value="24.42">8 Years</option>
        <option value="27.41">9 Years</option>
        <option value="30.40">10 Years</option>
    </select>
</td>
<td>
    <select name="names">
        <option value="1">1 domain name</option>
        <option value="2">2 domain names</option>
        <option value="3">3 domain names</option>
        <option value="4">4 domain names</option>
        <option value="5">5 domain names</option>
        <option value="6">6 domain names</option>
        <option value="7">7 domain names</option>
        <option value="8">8 domain names</option>
        <option value="9">9 domain names</option>
        <option value="10">10 domain names</option>
        <option value="11">11 domain names</option>
    </select>
</td>
<td>
    <select name="transfer">
        <option value="0">No</option>
        <option value="4.50">Yes</option>
    </select>
</td>
<td>
    &pound;
        <input type="text" id="total" readonly />
</td>
</tr>
</tbody>
</table>
</form>
<script>
function setPrice () {
    var years = $('#buy').find('[name="years"]').val();
    var names = $('#buy').find('[name="names"]').val();
    var transfer = $('#buy').find('[name="transfer"]').val();
    var result = parseFloat(years * names + names * transfer, 10).toString().split('.');
    if (result[1] === void 0) {
        result[1] = '';
    }
    while (result[1].length < 2) {
        result[1] += '0';
    }
    result = result[0] + '.' + result[1].substr(0,2);
    $('#total').val(result);
}
$('form>select').change(setPrice);
setPrice();
</script>
</div>

</body>
</html>
4

1 に答える 1

2

コードを内側にラップするdocument.ready

$(document).ready(function(){
$('form>select').change(setPrice);
setPrice();
});

また

var result = parseFloat((years * names) + (names * transfer), 10)

交換

$('form>select').change(setPrice);

と

$('form select').change(setPrice);

これ$('form>select').change(setPrice);は、子孫ではなく直接の子を選択するためです。

DEMO

于 2013-03-22T08:40:20.950 に答える