Создайте входные данные, которые зависят от множественного выбора, который будет складывать / вычитать значения входных данных - PullRequest
0 голосов
/ 19 апреля 2020

Я создаю автоматический c счетчик в JS, где при выборе нескольких опций в выборе, каждый из этих опций, которые являются Функциями, отправляет числовую цифру, определяемую числовой стоимостью, таким образом отправляя цифру в один и тот же вход (или несколько).

Мое намерение состоит в том, что, разместив эти цифры, вы будете на входе в целом или, наоборот, на трех входах, таким образом: X / Y / Z.

Таким образом, значение X будет соответствовать положительным числовым значениям, значение Y - отрицательным числовым значениям и, наконец, значение Z с разницей обоих, способное оставаться положительным числом или только 0 , в случае появления отрицательного числа, появляется какой-то тип ошибки, не позволяющий продолжить.

Например, положительная функция «Большое тело» сгенерирует -5, а положительная функция «С отражениями» сгенерирует -6. В этом случае я бы хотел, чтобы отрицательное значение отображалось без значения da sh, которое указывает, что это отрицательное число. Значения будут добавлены вместе, когда я добавлю их, то есть, если я добавлю положительные черты «Большое тело» и «Отраженные», это сгенерирует всего -11.

С другой стороны, было бы быть начальным числом в положительном входе, то есть в X из 10.

В принципе, выбор будет охватывать около 50 значений, разделяя черты на положительные и отрицательные. Положительные переменные всегда будут генерировать отрицательное число, в то время как отрицательные переменные будут генерировать положительное число.

Я действительно не знаю, как я мог бы развить это, поскольку идея состоит в том, чтобы включить его в генератор форм, который я сделал. Я оставляю вас пока, что я сделал, чтобы вы могли увидеть основную идею c.

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

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

<select name="rasgos" class="multipleChosen rasgos" multiple="true">
  <optgroup label="Positivos"><option value="Cuerpo grande">Cuerpo grande</option>
  <option value="Musculoso">Musculoso</option>
  <option value="Ágil">Ágil</option>
  <option value="Con reflejos">Con reflejos</option>
  <option value="Preciso">Preciso</option>
  <option value="Afortunado">Afortunado</option>
  <option value="Atento">Atento</option>
  <option value="Agraciado">Agraciado</option>
  <option value="Vivaz">Vivaz</option>
  <option value="Culto">Culto</option>
  <option value="Noble">Noble</option>
  <option value="Líder">Líder</option>
  <option value="Defensor">Defensor</option>
  <option value="Precavido">Precavido</option>
  <option value="Orador">Orador</option>
  <option value="Sagaz">Sagaz</option>
  <option value="Aprendizaje rápido">Aprendizaje rápido</option>
  <option value="Crematomano">Crematomano</option>
  <option value="Regateador">Regateador</option>
  <option value="Domador">Domador</option>
  <optgroup label="Negativos">
  <option value="En los huesos">En los huesos</option>
  <option value="Débil">Débil</option>
  <option value="Lento">Lento</option>
  <option value="Vago">Vago</option>
  <option value="Glotón">Glotón</option>
  <option value="Sin reflejos">Sin reflejos</option>
  <option value="Sin puntería">Sin puntería</option>
  <option value="Torpe">Torpe</option>
  <option value="Dócil">Dócil</option>
  <option value="Honesto">Honesto</option>
  <option value="Obstuto">Obstuto</option>
  <option value="Mal oído">Mal oído</option>
  <option value="Feo">Feo</option>
  <option value="Estéril">Estéril</option>
  <option value="Aprendizaje lento">Aprendizaje lento</option>
  <option value="Testarudo">Testarudo</option>
  <option value="Tartamudo">Tartamudo</option>
  <option value="Disoluto">Disoluto</option>
  <option value="Ceguera">Ceguera</option>
  <option value="Enfermizo">Enfermizo</option>
</select>
<input type="text" disabled="" name="puntosrasgos" class="alin" value="" placeholder="Puntos de Rasgo [PR]"/>

<script>
$('.rasgos').on('change', function() {
var value =this.value;
    if(value == 'Cuerpo grande')
    {
        $('.alin').val('-5');
    }
    
  if(value == 'Musculoso')
    {
        $('.alin').val('-5');
    }
  
   if(value == 'Ágil')
    {
        $('.alin').val('-5');
    }
  
   if(value == 'Con reflejos')
    {
        $('.alin').val('-6');
    }
  
  if(value == 'Preciso')
    {
        $('.alin').val('-6');
    }
  if(value == 'Afortunado')
    {
        $('.alin').val('-6');
    }
    
  if(value == 'Atento')
    {
        $('.alin').val('-4');
    }
  
   if(value == 'Agraciado')
    {
        $('.alin').val('-5');
    }
  
   if(value == 'Vivaz')
    {
        $('.alin').val('-4');
    }
  
  if(value == 'Culto')
    {
        $('.alin').val('-4');
    }
  if(value == 'Noble')
    {
        $('.alin').val('-4');
    }
    
  if(value == 'Líder')
    {
        $('.alin').val('-6');
    }
  
   if(value == 'Defensor')
    {
        $('.alin').val('-6');
    }
  
   if(value == 'Precavido')
    {
        $('.alin').val('-6');
    }
  
  if(value == 'Orador')
    {
        $('.alin').val('-5');
    }
  if(value == 'Sagaz')
    {
        $('.alin').val('-5');
    }
    
  if(value == 'Aprendizaje  rápido')
    {
        $('.alin').val('-6');
    }
  
   if(value == 'Crematomano')
    {
        $('.alin').val('-4');
    }
  
   if(value == 'Regateador')
    {
        $('.alin').val('-4');
    }
  
  if(value == 'Domador')
    {
        $('.alin').val('-5');
    }
    if(value == 'En los huesos')
    {
        $('.alin').val('4');
    }
    
  if(value == 'Débil')
    {
        $('.alin').val('5');
    }
  
   if(value == 'Lento')
    {
        $('.alin').val('5');
    }
  
   if(value == 'Vago')
    {
        $('.alin').val('3');
    }
  
  if(value == 'Glotón')
    {
        $('.alin').val('3');
    }
});
  
  $(document).ready(function(){
  //Chosen
  $(".multipleChosen").chosen({
      placeholder_text_multiple: "Rasgos" //placeholder
	});
  //Select2
  $(".multipleSelect2").select2({
		placeholder: "Rasgos" //placeholder
	});
})

$('.multipleChosen.rasgos')
  
  
</script>

Может ли кто-нибудь предоставить мне базовый код c JS, чтобы добавить его самостоятельно? Большое спасибо, жду вашего ответа!

1 Ответ

0 голосов
/ 19 апреля 2020

Я создал JSFiddle с возможным решением:

https://jsfiddle.net/7b8294ej/

  • Я удалил библиотеку select2, потому что она, кажется, делает Работа очень похожа на библиотеку chosen.
  • Я использовал пользовательский атрибут «data-cost» вместо ручной инициализации стоимости с помощью jQuery.
  • Я закрыл теги optgroup .

Общая стратегия:

Вам необходимо прослушивать событие изменения, которое посылает выбор, каждый раз, когда опция выбирается / отменяется. Каждый раз, когда происходит изменение, мы пересчитываем затраты и обновляем входные данные.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...