有没有比我拥有的更好的方法来乘以输入值？

Question

我正在尝试将输入值相加或相乘以达到两个总数，这是在不尝试使用 for 循环的情况下工作的。我的目的是将选择器与每个字符串末尾的 i 的各种迭代相匹配。我在这里有一个小提琴示例：https : //jsfiddle.net/shiataz12/Lo1yek2g/69/我尝试在为每次迭代手动输入名称的同时复制和粘贴该函数，但是它并不完全有效，因为只有前两个和最后两个复选框在单击时才会执行任何操作。HTML :<--- HTML SECTION --->>// obtained from $nosday = $_POST['nosday'];<br>// value is normally $nosday<br><input type="text" value="5" id="nosday"><br><br> // obtained from $count = mysqli_num_rows($result); <br> // value is normally $count; <br><input type="text" value="2" id="countrows"><br><br><label for="checkbox1">Standard</label><<----Assume checkbox --> id --> is $qri and $qri = "qr"."$i";<input type="checkbox" name="checkbox1" class="quip" value="125" id="qr1" checked><br><br><label for="checkbox1">Equipped</label><input type="checkbox" name="checkbox1" class="quip" value="225" id="qr1"><br><br><label for="checkbox3">GPS</label><input type="checkbox" name="checkbox3" value="20" id="qr1"><br><br><label for="checkbox4">booster</label><input type="checkbox" name="checkbox4" value="20" id="qr1"><br><br><label for="checkbox5">One tent</label><input type="checkbox" name="checkbox5" class="tents" value="60" id="qr1" checked><br><br><label for="checkbox6">Two tents :</label><input type="checkbox" name="checkbox6" class="tents" value="80" id="qr1"><br><br>// assume id="#dailytotal" where dailytotal = "dailytotal"."$i";<br>Daily :<span id="dailytotal1"> </span><br><br>// Assume id = "$lengthtotal" where $lengthtotal = "lengthtotal"."$i";<br>Total :<span id="lengthtotal1"> </span><br><br>// Hidden element for daily rate to use in $_POST, shown for now<br><input tyep="text" id="dailytot1" name="pricef1" value=""><br>提供的示例假设数据库有两行，因此 i = 2 所以 id 应该更改为qr2for i=2。我希望通过使用行数作为基础来在 Jquery 中使用 for 来实现这一点，仅限于行数，以便每个部分可以独立运行，但是它们继续一起对函数做出反应并且不显示任何值.我想也许如果我现在可以让它工作并复制/粘贴带有个人 ID 的代码，这会给我时间来研究更好的解决方案，但是它并没有像我预期的那样工作。与map它会更好地声明一个数组之前和我可以使用跨越输入相同的id作为数组？它使计算更容易，虽然我想我可以使用名称选择器。希望有人能指导我找到正确的答案，这让我很沮丧。

Answer 1

把它剪短了一点。还有其他问题。“标签”假设是指标记元素的 id。“标准”和“装备”选项实际上是单选按钮，而不是复选框，因为大概您可以拥有其他选项之一。我重命名了一些类和 id，尽管您可能不需要所有这些。我假设您可能正在动态生成 HTML 并根据您拥有的行数为后缀添加“i”的值。我实际上只是对第一行进行了更改，并重新编写了 JS，以便为该行的输入元素中的值提供项目的总数。不确定您是如何计算这些总数的，因为我认为 $("#multiplier") 甚至不在您的代码中。

<--- HTML SECTION --->>

// obtained from $nosday = $_POST['nosday'];

<br>

// value is normally $nosday

<br>

<input type="hidden" value = "1.5" id = "multiplier">

<input type="text" value="5" id="nosday"><br><br>

 // obtained from $count = mysqli_num_rows($result);

 <br>

 // value is normally $count;

 <br>

<input type="hidden" value="2" id="countrows"><br><br>

// Assume checkbox  is $qri and $qri = "qr"."$i";<br>

<label for="standard1">Standard</label>

<input type="radio" name="equipment" id ="standard1" class="quip qr1" value="125" checked><br><br>

<label for="equipped1">Equipped</label>

<input type="radio" name="equipment" id ="equipped1" class="quip qr1" value="225" ><br><br>

<label for="gps1">GPS</label>

<input type="checkbox" name="gps" id ="gps1" value="20" class ="qr1"><br><br>

<label for="booster1">booster</label>

<input type="checkbox" name="booster" id ="booster1" value="20" class ="qr1"><br><br>

<label for="tents1">One tent</label>

<input type="checkbox" name="tents" id ="tents1" class="tents qr1" value="60" checked><br><br>

<label for="twotents1">Two tents :</label>

<input type="checkbox" name="twotents" id ="twotents1" class="tent qr1" value="80"><br><br>

// assume id="#dailytotal" where dailytotal = "dailytotal"."$i";

<br>

Daily :<span id="dailytotal1"> </span><br><br>

// Assume id = "$lengthtotal" where $lengthtotal = "lengthtotal"."$i";

<br>

Total :<span id="lengthtotal1"> </span><br><br>

// Hidden element for daily rate to use in $_POST, shown for now

<br>

<input tyep="text" id="dailytot1" name="pricef1" value="">

<br>

JS 可能需要调整，因为我不知道你是如何生成 HTML 的。事实上，它应该计算加载时所有“i”行的总数，并且添加一些东西让它计算“i”行的总数并不难。这应该给你一些工作。

function Calc() {

    //get the values of the selected options

      var counter = $("#countrows").val();

      let totals = [];

            for (i = 1; i <= counter; i++) {

      totals[i] = 0;

      $.each($('.qr' + i + ':checked'), function() {

        totals[i] += parseInt($(this).val());

      });

      console.log(totals[i]);

    $('#dailytotal' + i).text('R' + totals[i] + '/day');

    $('#lengthtotal' + i).text('R' + totals[i] * parseFloat($("#multiplier").val()) + '/day');

    $('#dailytot' + i).val(totals[i]);

    $('#lengthtot' + i).val(totals[i] * parseFloat($("#multiplier").val()));

      }

}    

Calc();

$("[class*=qr]").on("change", function(e) {

e.preventDefault();

Calc();

});

"[class*=qr]" 并不是最好的，因为 *=qr 实际上并不是那么具体，这取决于您的标记。此外，不清楚您是否在任何地方都使用了表单标签。