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

Question

我有 4 个表 id 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 错误，对于这项顶级工作来说，变量也需要是唯一的吗？

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">

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