Question

我创建了一个根据某些选定标准计算价格的表单，作为一个独立的程序，它工作得很好，遗憾的是，由于某种原因，一旦我将代码放入我的表的单独单元格中它就不再有用了，唯一的方法我可以得到最终结果是当我刷新浏览器时.....任何想法如何解决这个问题，请参阅下面的代码：

取<td>＆amp; </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>

Answer 1

将代码包裹在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

表中的jQuery表单中断

1 个答案: