Bonne nuit.

J'essaie de remplir plusieurs entrées en fonction de deux sélections différentes, où différentes combinaisons des deux sélections donneront des résultats différents dans les entrées.

Pour le moment, je l'ai, mais je ne sais pas comment lier `` race '' à `` niveau '' de sorte que lorsque les deux sont sélectionnés, le numéro correspondant apparaît rempli, comme qui dit que ce serait de mettre les données d'une table à double entrée dans javascript.

$('.raza').on('change', function() {
var value =this.value;
    if(value == 'Brujas y brujos');
   else if(value == 'Nivel nato');
    {
        $('.fue').val('6');
       $('.mag').val('10');
       $('.res').val('2');
         $('.vel').val('2');
         $('.vit').val('55');
    }
  if(value == 'Brujas y brujos');
   else if(value == 'Nivel nato');
    {
         $('.fue').val('8');
       $('.mag').val('20');
       $('.res').val('4');
         $('.vel').val('3');
         $('.vit').val('65');
    }
 
  if(value == 'Brujas y brujos');
   else if(value == 'Nivel medio');
    {
         $('.fue').val('10');
       $('.mag').val('30');
       $('.res').val('6');
         $('.vel').val('4');
         $('.vit').val('80');
      
          }
      
      if(value == 'Brujas y brujos');
   else if(value == 'Nivel total');
    {
         $('.fue').val('12');
       $('.mag').val('40');
       $('.res').val('8');
         $('.vel').val('5');
         $('.vit').val('90');
         
         if(value == 'Hijos de Eva');
   else if(value == 'Nivel nato');
    {
        $('.fue').val('7');
       $('.mag').val('0');
       $('.res').val('3');
         $('.vel').val('2');
         $('.vit').val('50');
    }
  if(value == 'Hijos de Eva');
   else if(value == 'Nivel nato');
    {
         $('.fue').val('9');
       $('.mag').val('0');
       $('.res').val('5');
         $('.vel').val('3');
         $('.vit').val('60');
    }
 
  if(value == 'Hijos de Eva');
   else if(value == 'Nivel medio');
    {
         $('.fue').val('11');
       $('.mag').val('0');
       $('.res').val('7');
         $('.vel').val('4');
         $('.vit').val('70');
      
          }
      
      if(value == 'Hijos de Eva');
   else if(value == 'Nivel total');
    {
         $('.fue').val('13');
       $('.mag').val('0');
       $('.res').val('9');
         $('.vel').val('5');
         $('.vit').val('85');
  
  });
<script src="
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"> 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"> 
</script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<select  name="titulos" class="raza"><option hidden value="" disabled selected>Raza</option><option label="Brujas y brujos">Brujas y brujos</option>
  <option label="Hijos de Eva">Hijos de Eva</option>
    <option label="Humanos">Humanos</option>
    <option label="Licántropos">Licántropos</option>
  <option label="Sirenas y tritones">Sirenas y tritones</option>
     <option label="Vampiros">Vampiros</option>
  </select>
  
  <select  name="titulos" class="nivel"><option hidden value="" disabled selected>Nivel</option><option label="Nivel nato">Nivel nato</option>
  <option label="Nivel primario">Nivel primario</option>
    <option label="Nivel medio">Nivel medio</option>
    <option label="Nivel total">Nivel total</option>
  </select>
  
  
  <table style=" display: flex; justify-content: center; align-items: center; "><tbody><tr><td><div class="stats" style=" width: 90px; "><input id="fue" type="text" class="fue" value="" placeholder="0"> Fuerza</div></td><td><div class="stats" style=" width: 90px; "><input id="mag" type="text" class="mag" value="" placeholder="0"> Magia</div></td><td><div class="stats"><input id="res" type="text" class="res" value="" placeholder="0"> Resistencia</div></td><td><div class="stats" style="width: 120px;"><input id="vel" type="text" class="vel" value="" placeholder="0"> Velocidad</div></td><td><div class="stats" style=" width: 115px; "><input id="vit" type="text" class="vit" value="" placeholder="0"> Vitalidad</div></td></tr></tbody></table></div>
  

"Que pouvais-je faire?" Merci d'avance!

0
user14133953 26 août 2020 à 23:23

2 réponses

Meilleure réponse

Exemple de travail:

$('.raza,.nivel').on('change', function() {
  var raza = $('.raza').val();
  var nivel = $('.nivel').val();
  
  if (raza == 'Brujas y brujos' && nivel == 'Nivel nato') {
    $('.fue').val('6');
    $('.mag').val('10');
    $('.res').val('2');
    $('.vel').val('2');
    $('.vit').val('55');
  } else if (raza == 'Brujas y brujos' && nivel == 'Nivel nato') {
    $('.fue').val('8');
    $('.mag').val('20');
    $('.res').val('4');
    $('.vel').val('3');
    $('.vit').val('65');
  } else if (raza == 'Brujas y brujos' && nivel == 'Nivel medio') {
    $('.fue').val('10');
    $('.mag').val('30');
    $('.res').val('6');
    $('.vel').val('4');
    $('.vit').val('80');
  } else if (raza == 'Brujas y brujos' && nivel == 'Nivel total') {
    $('.fue').val('12');
    $('.mag').val('40');
    $('.res').val('8');
    $('.vel').val('5');
    $('.vit').val('90');
  } else if (raza == 'Hijos de Eva' && nivel == 'Nivel nato') {
    $('.fue').val('7');
    $('.mag').val('0');
    $('.res').val('3');
    $('.vel').val('2');
    $('.vit').val('50');
  } else if (raza == 'Hijos de Eva' && nivel == 'Nivel nato') {
    $('.fue').val('9');
    $('.mag').val('0');
    $('.res').val('5');
    $('.vel').val('3');
    $('.vit').val('60');
  } else if (raza == 'Hijos de Eva' && nivel == 'Nivel medio') {
    $('.fue').val('11');
    $('.mag').val('0');
    $('.res').val('7');
    $('.vel').val('4');
    $('.vit').val('70');
  } else if (raza == 'Hijos de Eva' && nivel == 'Nivel total') {
    $('.fue').val('13');
    $('.mag').val('0');
    $('.res').val('9');
    $('.vel').val('5');
    $('.vit').val('85');
  } else {
    // default?
    $('.fue').val('0');
    $('.mag').val('0');
    $('.res').val('0');
    $('.vel').val('0');
    $('.vit').val('0');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js">
</script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<select name="titulos" class="raza">
  <option hidden value="" disabled selected>Raza</option>
  <option value="Brujas y brujos">Brujas y brujos</option>
  <option value="Hijos de Eva">Hijos de Eva</option>
  <option value="Humanos">Humanos</option>
  <option value="Licántropos">Licántropos</option>
  <option value="Sirenas y tritones">Sirenas y tritones</option>
  <option value="Vampiros">Vampiros</option>
</select>

<select name="titulos" class="nivel">
  <option hidden value="" disabled selected>Nivel</option>
  <option value="Nivel nato">Nivel nato</option>
  <option value="Nivel primario">Nivel primario</option>
  <option value="Nivel medio">Nivel medio</option>
  <option value="Nivel total">Nivel total</option>
</select>


<table>
  <tbody>
    <tr>
      <td>
        <div class="stats" style=" width: 90px; "><input id="fue" type="text" class="fue" value="" placeholder="0"> Fuerza</div>
      </td>
      <td>
        <div class="stats" style=" width: 90px; "><input id="mag" type="text" class="mag" value="" placeholder="0"> Magia</div>
      </td>
      <td>
        <div class="stats" style="width: 120px;"><input id="res" type="text" class="res" value="" placeholder="0"> Resistencia</div>
      </td>
      <td>
        <div class="stats" style="width: 120px;"><input id="vel" type="text" class="vel" value="" placeholder="0"> Velocidad</div>
      </td>
      <td>
        <div class="stats" style="width: 115px; "><input id="vit" type="text" class="vit" value="" placeholder="0"> Vitalidad</div>
      </td>
    </tr>
  </tbody>
</table>
</div>

Remarque: je ne comprends pas pourquoi vous avez besoin de autant de bibliothèques dans un si petit code.

Note 2: il y a tellement de choses ici à optimiser ... Écrivez un commentaire si vous êtes d'accord avec cette réponse et comprenez-la, afin que nous puissions essayer d'optimiser un peu.

0
Anton 26 août 2020 à 21:06

Utiliser if / else if pour faire cela est le meilleur moyen de rendre tout le monde fou, en particulier en ce qui concerne la maintenance du code. vous devez utiliser une table de transcription pour cela:

const myForm = document.getElementById('my-form')
  ,   fue = document.getElementById('fue')
  ,   mag = document.getElementById('mag')
  ,   res = document.getElementById('res')
  ,   vel = document.getElementById('vel')
  ,   vit = document.getElementById('vit')
 
const raza_nivel =
      { r1_n1 : { fue:  6, mag: 10, res: 2, vel: 2, vit: 55 }  // Brujas y brujos
      , r1_n2 : { fue:  8, mag: 20, res: 4, vel: 3, vit: 65 }
      , r1_n3 : { fue: 10, mag: 30, res: 6, vel: 4, vit: 80 }
      , r1_n4 : { fue: 12, mag: 40, res: 8, vel: 5, vit: 80 }
      , r2_n1 : { fue: 12, mag: 40, res: 8, vel: 5, vit: 90 }  // Hijos de Eva
      , r2_n2 : { fue:  7, mag:  0, res: 3, vel: 2, vit: 50 }
      , r2_n3 : { fue:  9, mag:  0, res: 5, vel: 3, vit: 60 }
      , r2_n4 : { fue: 11, mag:  0, res: 7, vel: 4, vit: 70 }
      , r3_n1 : { fue:0, mag:0, res:0, vel:0, vit:01 }  // Humanos
      , r3_n2 : { fue:0, mag:0, res:0, vel:0, vit:02 }
      , r3_n3 : { fue:0, mag:0, res:0, vel:0, vit:03 }
      , r3_n4 : { fue:0, mag:0, res:0, vel:0, vit:04 }
      , r4_n1 : { fue:0, mag:0, res:0, vel:0, vit:05 }  // Licántropos
      , r4_n2 : { fue:0, mag:0, res:0, vel:0, vit:06 }
      , r4_n3 : { fue:0, mag:0, res:0, vel:0, vit:07 }
      , r4_n4 : { fue:0, mag:0, res:0, vel:0, vit:08 }
      , r5_n1 : { fue:0, mag:0, res:0, vel:0, vit:09 }  // Sirenas y tritones
      , r5_n2 : { fue:0, mag:0, res:0, vel:0, vit:10 }
      , r5_n3 : { fue:0, mag:0, res:0, vel:0, vit:11 }
      , r5_n4 : { fue:0, mag:0, res:0, vel:0, vit:12 }
      , r6_n1 : { fue:0, mag:0, res:0, vel:0, vit:13 }  // Vampiros
      , r6_n2 : { fue:0, mag:0, res:0, vel:0, vit:14 }
      , r6_n3 : { fue:0, mag:0, res:0, vel:0, vit:15 }
      , r6_n4 : { fue:0, mag:0, res:0, vel:0, vit:16 }
      }

myForm.oninput=()=>
  {
  let key = myForm.raza.value + '_' + myForm.nivel.value
  if (key.length === 5)
    {
    fue.value = raza_nivel[key].fue
    mag.value = raza_nivel[key].mag
    res.value = raza_nivel[key].res
    vel.value = raza_nivel[key].vel
    vit.value = raza_nivel[key].vit
    }
  }
<form action="xx" id="my-form">
  <select name="raza">
    <option hidden value="" disabled selected>Raza</option>
    <option value="r1" >Brujas y brujos    </option>
    <option value="r2" >Hijos de Eva       </option>
    <option value="r3" >Humanos            </option>
    <option value="r4" >Licántropos        </option>
    <option value="r5" >Sirenas y tritones </option>
    <option value="r6" >Vampiros           </option>
  </select>

  <select name="nivel">
    <option hidden value="" disabled selected>Nivel</option>
    <option value="n1" >Nivel nato     </option>
    <option value="n2" >Nivel primario </option>
    <option value="n3" >Nivel medio    </option>
    <option value="n4" >Nivel total    </option>
  </select>
</form>
  <br>
  <input id="fue" type="text" class="fue" value="" placeholder="0">
  Fuerza
  <br>
  <input id="mag" type="text" class="mag" value="" placeholder="0">
  Magia
  <br>
  <input id="res" type="text" class="res" value="" placeholder="0">
  Resistencia
  <br>
  <input id="vel" type="text" class="vel" value="" placeholder="0">
  Velocidad
  <br>
  <input id="vit" type="text" class="vit" value="" placeholder="0">
  Vitalidad
0
Mister Jojo 26 août 2020 à 21:35