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 回答