0

我有一个很奇怪的问题。我有两个可以输入值的字段，然后我想在两个单独的标签中显示计算值（不同的计算）。

但是，现在只显示其中一个值。

HTML：

<input id="btcowned" />


<p>
    Fee<br />
    <input id="feebox" value="4.5" />
</p>

<p>
    Transfer
<label id="totalnetworth" style="font-weight: bold;" />
    (no vat)<br />
    <label id="totalnetworthVat" style="font-weight: bold;" />
    (vat)<br />
</p>

JAVASCRIPT：

<script>
    $(document).ready(function() {
        $('#btcowned').keyup(function() {
            updateNumbers();
        });
        $('#feebox').keyup(function() {
            updateNumbers();
        });


    });

    function updateNumbers() {
        var chosen = $('#btcowned').val();
        var fee = parseFloat($('#feebox').val());

        var val = chosen - ((chosen * fee) / 100);
        var vatVal = val * (1 + 0.025);

        $('#totalnetworth').text(val);
        $('#totalnetworthVat').text(vatVal);

        alert(vatVal);

    }
</script>

totalnetworth 效果很好并显示了计算值。totalnetworthVat 什么也没显示。我还尝试了比编写 vatVal 更简单的方法，例如 $('#totalnetworthVat').text('foo')。

但是什么都没有显示，并且 FireBug 没有显示 JS 错误。

我的 alert() 显示 vatVal 是一个实数。

有任何想法吗？

4

2 回答 2

2

我认为问题是自闭标签：

<label id="totalnetworth" style="font-weight: bold;" />

如果您将其更改为：

<label id="totalnetworth" style="font-weight: bold;"></label>

...然后它似乎工作：http: //jsfiddle.net/GRFda/

我的理解是，除非文档类型是 xhtml，否则像您这样的自动关闭标签将不起作用，即使这样，如果页面没有使用 MIME 类型text/xml或application/xhtml+xml.

于 2013-06-02T10:26:46.530 回答
1

我已经做了很多计算器，这就是为什么我给它做了更多的工作。

看看我在jsFiddle中的解决方案。

<style type='text/css'>
table td,
table th {
    border: 1px solid #DDD;
    padding: 2px 5px;
}
.totalnetworth .value {
    font-weight: bold;
}
</style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {
    $('.btcowned').keyup(updateNumbers);
    $('.feebox').keyup(updateNumbers);
});
function updateNumbers(e) {
// Preparation
var $calc = $(this).closest('.calculator'),
    $results = $calc.find('table'),
    chosen = parseFloat($calc.find('.btcowned').val()),
    fee = parseFloat($calc.find('.feebox').val()),
    vatPercent = 25,
// Calculation
    vatRate = vatPercent * 0.01 + 1,
    val = chosen - ((chosen * fee) / 100),
    vatVal = val * vatRate;
// Representation
$results.find('.totalnetworth .novat').html(isNaN(val) ? '-' : Number(val).toFixed(2));
$results.find('.totalnetworth .wvat').html(isNaN(vatVal) ? '-' : Number(vatVal).toFixed(2));
}
});//]]>
</script>
<div class="calculator">
    <label for="btcowned-1">btcowned
        <input id="btcowned-1" class="btcowned" value="" />
    </label>
    <label for="btcowned-1">Fee
        <input id="feebox-1" class="feebox" value="4.5" />
    </label>
    <table>
        <tr>
            <th>Title</th>
            <th>Cost</th>
            <th>Cost+VAT</th>
        </tr>
        <tr class="totalnetworth">
            <td>Transfer</td>
            <td class="novat value"></td>
            <td class="wvat value"></td>
        </tr>
    </table>
</div>

以及有关您的代码的一些评论：

  1. 不要在脚本中使用 ID；
  2. 仅关闭 void 标签，例如area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr;
  3. 不要相信用户输入会给出正确的数据格式，因为它很容易让你的脚本崩溃；
  4. 始终尝试将脚本中的准备和计算部分与表示部分分开，这将使其更清晰，并且更容易捕获错误。
于 2013-06-02T11:03:26.983 回答