Question

我有4个表ids table1，table2，table3和table4见下文

<table id="table2">
  <tr>
    <td colspan="2">Room 2</td>
  </tr>
  <tr>
    <td>
      <p>Width (m):</p>
    </td>
    <td><label><input type="radio"  id="value1" name="width" value="4" onchange="calc" />4M</label></td>
    <td><label><input type="radio"  id="value1" name="width" value="5" onchange="calc" />5M</label></td>
  </tr>
  <tr>
    <td>
      <p>Length (m):</p>
    </td>
    <td colspan="2"><input type="range" step="0.5" name="length" id="value2" value="0" min="0" max="30" data-highlight="true" onchange="calc"></td>
  </tr>
  <tr>
    <td>
      <p>Price Range:</p>
    </td>
    <td colspan="2">
      <select name="pricerange">
        <option value="0">-Price Range-</option>
        <option value="2.99">Carpet1 (&#163;2.99)</option>
        <option value="3.99">Carpet2 (&#163;3.99)</option>
        <option value="4.99">Carpet3 (&#163;4.99)</option>
        <option value="5.99">Carpet4 (&#163;5.99)</option>
        <option value="6.99">Carpet5 (&#163;6.99)</option>
        <option value="7.99">Carpet6 (&#163;7.99)</option>
        <option value="8.99">Carpet7 (&#163;8.99)</option>
        <option value="9.99">Carpet8 (&#163;9.99)</option>
        <option value="10.99">Carpet9 (&#163;10.99)</option>
        <option value="11.99">Carpet10 (&#163;11.99)</option>
        <option value="12.99">Carpet11 (&#163;12.99)</option>
        <option value="13.99">Carpet12 (&#163;13.99)</option>
        <option value="14.99">Carpet13 (&#163;14.99)</option>
        <option value="15.99">Carpet14 (&#163;15.99)</option>
        <option value="16.99">Carpet15 (&#163;16.99)</option>
        <option value="17.99">Carpet16 (&#163;17.99)</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <p>Total &#163; (m&#178;):</p>
    </td>
    <td colspan="2"><input type="text" id="total" name="total"/></td>
  </tr>
</table>

我有一些javascript来处理计算

$("#table1 :input").change(function() {
            var value1 = $("#table1 #value1:checked").val();
            var value2 = $("#table1 #value2").val();
            var selectoption = $("#table1 #pricerange").val();
            var total = (value1 * value2) * selectoption;
            var totaln = total.toFixed(2)
            selectoption = (selectoption) ? selectoption : 0;
            $('#table1 #total').val(totaln);
        });

        $("#table2 :input").change(function() {
            var value1 = $("#table2 #value1:checked").val();
            var value2 = $("#table2 #value2").val();
            var selectoption = $("#table2 #pricerange").val();
            var total = (value1 * value2) * selectoption;
            var totaln = total.toFixed(2)
            selectoption = (selectoption) ? selectoption : 0;
            $('#table2 #total').val(totaln);
        });

        $("#table3 :input").change(function() {
            var value1 = $("#table3 #value1:checked").val();
            var value2 = $("#table3 #value2").val();
            var selectoption = $("#table3 #pricerange").val();
            var total = (value1 * value2) * selectoption;
            var totaln = total.toFixed(2)
            selectoption = (selectoption) ? selectoption : 0;
            $('#table3 #total').val(totaln);
        });

        $("#table4 :input").change(function() {
            var value1 = $("#table4 #value1:checked").val();
            var value2 = $("#table4 #value2").val();
            var selectoption = $("#table4 #pricerange").val();
            var total = (value1 * value2) * selectoption;
            var totaln = total.toFixed(2)
            selectoption = (selectoption) ? selectoption : 0;
            $('#table4 #total').val(totaln);
        });

但是我一直在表2,3,4上遇到NaN错误这些顶级作品的vars也需要是唯一的吗？

Answer 1

你有一个错误的选择器，你试图以这种方式获得id：pricerange的元素：

var selectoption = $("#table2 #pricerange").val();

但你有这个到你的HTML：

<select name="pricerange">

尝试将其更改为：

<select name="pricerange" id="pricerange">

<强>注意

当您使用选择器ID时，请记住该ID必须是唯一的，因此请使用如下类更改选择器ID：

var selectoption = $("#table2 .pricerange").val();

并在你的HTML中：

<select name="pricerange" class="pricerange">

请在您的所有选择器中执行此操作

如何在javascript中处理多个计算？

1 个答案: