Jquery - l oop для каждого элемента ввода - PullRequest
Новая
       55

Jquery - l oop для каждого элемента ввода

0 голосов
/ 29 февраля 2020

Я хочу увеличить все входы в зависимости от значения, полученного от пользователя. У меня есть 20 блоков с 6 входами внутри, и я хочу увеличить и сделать калькуляцию на каждом входе из каждого блока. Мне удалось увеличить входные данные из одного окна, но я хочу сделать это динамически.

Должен ли я использовать переменные селектора для приращения входных данных?

Есть мои html ящики 

<div id="left-container-method" >
            <!-- CARDS BLACK -->
            <div class="card col-md-6" style="width: 18rem;">
              <div class="card-body">
                <h5 class="card-title">BLACK</h5>
              </div>
              <ul class="list-group list-group-flush">
                <li class="list-group-item win-methode">Win<input id="black-win-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item lose-methode">Lose<input id="black-lose-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ratio-methode">Ratio<input id="black-ratio-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ecart-methode">Ecart<input id="black-ecart-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ecart-max-methode">Ecart Max<input id="black-ecart-max-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ecart-histo-methode">Ecart Histo<input id="black-ecart-histo-input" class="form-control" type="text" value="" readonly></input></li>
              </ul>
              <p class="list-number-example">2 - 4 - 6 - 8 - 10 - 11 - 13 - 15 - 17 - 20 - 22 - 24  - 28 - 29 - 31 - 33 - 35</p>
            </div>
            <!-- CARDS RED -->
            <div class="card col-md-6" style="width: 18rem;">
              <div class="card-body">
                <h5 class="card-title">RED</h5>
              </div>
              <ul class="list-group list-group-flush">
                <li class="list-group-item win-methode">Win<input id="red-win-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item lose-methode">Lose<input id="red-lose-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ratio-methode">Ratio<input id="red-ratio-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ecart-methode">Ecart<input id="red-ecart-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ecart-max-methode">Ecart Max<input id="red-ecart-max-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ecart-histo-methode">Ecart Histo<input id="red-ecart-histo-input" class="form-control" type="text" value="" readonly></input></li>
              </ul>
              <p class="list-number-example">1 - 3 - 5 - 7 - 9 - 12 - 14 - 16 - 18 - 19 - 21 - 23 - 25 - 27 - 30 - 32 - 34 - 36</p>
            </div>
            <!-- CARDS ODD -->
            <div class="card col-md-6" style="width: 18rem;">
              <div class="card-body">
                <h5 class="card-title">ODD</h5>
              </div>
              <ul class="list-group list-group-flush">
                <li class="list-group-item win-methode">Win<input id="odd-win-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item lose-methode">Lose<input id="odd-lose-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ratio-methode">Ratio<input id="odd-ratio-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ecart-methode">Ecart<input id="odd-ecart-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ecart-max-methode">Ecart Max<input id="odd-ecart-max-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ecart-histo-methode">Ecart Histo<input id="odd-ecart-histo-input" class="form-control" type="text" value="" readonly></input></li>
              </ul>
              <p class="list-number-example">1 - 3 - 5 - 7 - 9 - 11 - 13 - 15 - 17 - 19 - 21 - 23 - 25 - 27 - 29 - 31 - 33 - 35</p>
            </div>
            <!-- CARDS EVEN -->
            <div class="card col-md-6" style="width: 18rem;">
              <div class="card-body">
                <h5 class="card-title">EVEN</h5>
              </div>
              <ul class="list-group list-group-flush">
                <li class="list-group-item win-methode">Win<input id="even-win-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item lose-methode">Lose<input id="even-lose-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ratio-methode">Ratio<input id="even-ratio-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ecart-methode">Ecart<input id="even-ecart-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ecart-max-methode">Ecart Max<input id="even-ecart-max-input" class="form-control" type="text" value="" readonly></input></li>
                <li class="list-group-item ecart-histo-methode">Ecart Histo<input id="even-ecart-histo-input" class="form-control" type="text" value="" readonly></input></li>
              </ul>
              <p class="list-number-example">2 - 4 - 6 - 8 - 10 - 12 - 14 - 16 - 18 - 20 - 22 - 24  - 28 - 30 - 32 - 34 - 36</p>
            </div>

Мой скрипт для приращения одного поля: 

 // Main Script
$('table tr td').click(function(){
// Initialisation
  var number = $(this).text();
  number = parseInt(number);
  // Datas
  var data = new Array();
  // Method central
  data['listBlackMethod'] = [2,4,6,8,10,11,13,15,17,20,22,24,28,29,31,33,35];
  data['listRedMethod'] = [1,3,5,7,9,12,14,16,18,19,21,23,25,27,30,32,34,36];
  data['listOddMethod']  = [1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31,33,35];
  data['listEvenMethod']  = [2,4,6,8,10,12,14,16,18,20,22,24 ,28,30,32,34,36];
  data['listSmallMethod']  = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18];
  data['listBigMethod']  = [19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36];
  // Method gauche
  data['listSixain1Method']  = [1,2,3,4,5,6];
  data['listSixain2Method']  = [7,8,9,10,11,12];
  data['listSixain3Method']  = [13,14,15,16,17,18];
  data['listSixain4Methodxx']  = [19,20,21,22,23,24];
  data['listSixain5Method']  = [25,26,27,28,29,30];
  data['listSixain6Method']  = [31,32,33,34,35,36];
  data['listCol1Method']  = [3,6,9,12,15,18,21,24,27,30,33,36];
  data['listCol2Method']  = [2,5,8,11,14,17,20,23,26,29,32,35];
  data['listCol3Method']  = [1,4,7,10,13,16,19,22,25,28,31,34];
  // Method gauche
  data['listVoisZeroMethod']  = [1,2,3,4,5,6];
  data['listTiersCylinMethod']  = [7,8,9,10,11,12];
  data['listOrpheMethod']  = [13,14,15,16,17,18];
  data['listDouz1Method']  = [19,20,21,22,23,24];
  data['listDouz2Method']  = [25,26,27,28,29,30];
  data['listDOuz3Method']  = [31,32,33,34,35,36];
  data['listSecretMethod']  = [3,6,9,12,15,18,21,24,27,30,33,36];


if(jQuery.inArray(number,data['listBlackMethod']) != -1){
    var num = +$("#black-win-input").val() + 1;
    $("#black-win-input").val(num);

    $("#black-ratio-input").val( $("#black-win-input").val() / $("#black-lose-input").val() );
}
else{
    var num = +$("#black-lose-input").val() + 1;
    $("#black-lose-input").val(num);

    $("#black-ratio-input").val( $("#black-win-input").val() / $("#black-lose-input").val() );
}


});
...