Есть ли лучший способ умножить входные значения, чем у меня? - PullRequest
0 голосов
/ 27 июня 2019

Я пытаюсь добавить или умножить входные значения, чтобы получить общее число два, это работало без попытки использовать цикл 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>
// Hidden element for length rate to use in $_POST, shown for now
<input tyep="text" id="lengthtot" name="pricef2" value="">
<input type="text" value="2" id="countrows"><br><br>
<label for="checkbox1">Standard</label>
<input type="checkbox" name="checkbox1" class="quip" value="125" id="qr2" checked><br><br>
<label for="checkbox1">Equipped</label>
<input type="checkbox" name="checkbox1" class="quip" value="225" id="qr2"><br><br>
<label for="checkbox3">GPS</label>
<input type="checkbox" name="checkbox3" value="20" id="qr2"><br><br>
<label for="checkbox4">booster</label>
<input type="checkbox" name="checkbox4" value="20" id="qr2"><br><br>
<label for="checkbox5">One tent</label>
<input type="checkbox" name="checkbox5" class="tents" value="60" id="qr2" checked><br><br>
<label for="checkbox6">Two tents :</label>
<input type="checkbox" name="checkbox6" class="tents" value="80" id="qr2"><br><br>
Daily :<span id="dailytotal2"> </span><br><br>
Total :<span id="lengthtotal2"> </span><br><br>
// Hidden element for daily rate to use in $_POST, shown for now
<br>
<input tyep="text" id="dailytot2" name="pricef1" value="">
<br>
// Hidden element for length rate to use in $_POST, shown for now
<input tyep="text" id="lengthtot2" name="pricef2" value="">

$(function() {
  $("input.quip").change(function() {
    $("input.quip").not(this).prop("checked", false);
  });
    $("input.tent").change(function() {
    $("input.tent").not(this).prop("checked", false);
  });
  $(function() {
    //get the values of the selected options
      var counter = ("#countrows").val();
            var i = 0;
      for (i = 1; i <= counter; i++){
    let v = $.map($('#qr' + i).is("checked"), function(i) {
      return parseFloat($(i).val());
    });

    let s = v.reduce((a, b) => a + b); //sum them up to a daily total
    console.log(v);
    $('#dailytotal' + i).text('R' + s + '/day');
    $('#lengthtotal' + i).text('R' + s * parseFloat($("#nosday").val()) + '/day');
    $('#dailytot' + i).val(s);
    $('#lengthtot' + i).val(s * parseFloat($("#nosday").val()));
      }
      });
});     

В приведенном примере предполагается, что в базе данных есть две строки, поэтому i = 2, поэтому для идентификаторов следует изменить значение qr2 для i=2. Я ожидал, что это сработает, используя количество строк в качестве основы для использования for в Jquery, ограниченное количеством строк, чтобы каждый раздел мог действовать независимо, однако они продолжают реагировать на функцию вместе и не показывают никаких значений. .

Я подумал, возможно, если бы я мог заставить его работать сейчас и скопировать / вставить код с индивидуальными идентификаторами, которые дадут мне время для работы над лучшим решением, однако это не сработает, как я ожидал. с map было бы лучше объявить массив до и можно ли использовать один и тот же идентификатор на входах в качестве массива? Это облегчает вычисления, хотя я думаю, что я мог бы использовать селектор имени.

Надеюсь, кто-то может привести меня к правильному ответу, это ведет меня к стене.

1 Ответ

0 голосов
/ 28 июня 2019

Немного урезал.Есть и другие проблемы.Предполагается, что «Метки для» относятся к идентификатору помеченного элемента.Опции «Стандартный» и «Оборудованный» - это действительно переключатели, а не флажки, поскольку, вероятно, у вас может быть один из других.Я переименовал некоторые из классов и идентификаторов, хотя вам могут не понадобиться все из них.Я предполагаю, что, возможно, вы генерируете 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 не настолько специфичен, в зависимости от вашей разметки.Также не ясно, используете ли вы теги форм где-либо.

...