Получите разные значения в зависимости от критериев выбора - PullRequest
Новая
       0

Получите разные значения в зависимости от критериев выбора

0 голосов
/ 17 июня 2020

Я был бы признателен, если бы вы мне помогли, так как я новичок в программировании, я хочу получать разные значения в зависимости от того, что я выбираю, и что эти числовые значения меняются в каждом поле. Например, если я выберу «Ссуды» в поле «Новые заказы», ​​значение будет: 312, в поле «В процессе» 180, в поле «Утверждено» 56 и в поле «Отклонено» 25, в качестве примера. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="row">
<div class="ml-auto">
<select class="custom-select">
    <option value="0" selected>Loans</option>
    <option value="1">Home appliances</option>
    <option value="2">Cable tv</option>
    <option value="3">Internet</option>
</select>
</div>
</div>
<div class="row">
  <!-- column -->
  <div class="col-xs-4">
      <div class="card bg-info text-white  card-hover">
          <div class="card-body">
              <h3 class="card-title m-b-0">New orders</h3>
              <div class="align-items-center">
                  <div class="p-t-20 text-center">
                     <span class="display-4 d-block font-medium">368</span>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <!-- column -->
  <div class="col-xs-4">
      <div class="card bg-secondary text-white  card-hover">
          <div class="card-body">
              <h3 class="card-title m-b-0">In process</h3>
              <div class="align-items-center">
                  <div class="p-t-20 text-center">
                     <span class="display-4 d-block font-medium">257</span>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <!-- column -->
  <div class="col-xs-4">
      <div class="card bg-success text-white  card-hover">
          <div class="card-body">
              <h3 class="card-title m-b-0">Approved</h3>
              <div class="align-items-center">
                  <div class="p-t-20 text-center">
                     <span class="display-4 d-block font-medium">86</span>
                  </div>
              </div>
          </div>
      </div>
  </div>
   <div class="col-xs-4">
      <div class="card bg-danger text-white  card-hover">
          <div class="card-body">
              <h3 class="card-title m-b-0">Rejected</h3>
              <div class="align-items-center">
                  <div class="p-t-20 text-center">
                     <span class="display-4 d-block font-medium">25</span>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Я добавил классы в промежутки, но вы можете сделать то же самое с именами тегов, у меня отлично работает;) 

let numbers = document.getElementsByClassName("number");
for(let i = 0;i<numbers.length;i++){
  numbers[i].addEventListener("click",()=>{
  //YOU WILL GET THE NUMBER YOU CLICKED
  console.log(numbers[i].innerText);
})
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="row">
<div class="ml-auto">
<select class="custom-select">
    <option value="0" selected>Loans</option>
    <option value="1">Home appliances</option>
    <option value="2">Cable tv</option>
    <option value="3">Internet</option>
</select>
</div>
</div>
<div class="row">
  <!-- column -->
  <div class="col-xs-4">
      <div class="card bg-info text-white  card-hover">
          <div class="card-body">
              <h3 class="card-title m-b-0">New orders</h3>
              <div class="align-items-center">
                  <div class="p-t-20 text-center">
                     <span class="display-4 d-block font-medium number">368</span>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <!-- column -->
  <div class="col-xs-4">
      <div class="card bg-secondary text-white  card-hover">
          <div class="card-body">
              <h3 class="card-title m-b-0">In process</h3>
              <div class="align-items-center">
                  <div class="p-t-20 text-center">
                     <span class="display-4 d-block font-medium number">257</span>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <!-- column -->
  <div class="col-xs-4">
      <div class="card bg-success text-white  card-hover">
          <div class="card-body">
              <h3 class="card-title m-b-0">Approved</h3>
              <div class="align-items-center">
                  <div class="p-t-20 text-center">
                     <span class="display-4 d-block font-medium number">86</span>
                  </div>
              </div>
          </div>
      </div>
  </div>
   <div class="col-xs-4">
      <div class="card bg-danger text-white  card-hover">
          <div class="card-body">
              <h3 class="card-title m-b-0">Rejected</h3>
              <div class="align-items-center">
                  <div class="p-t-20 text-center">
                     <span class="display-4 d-block font-medium number">25</span>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

Запустите код для проверки

0 голосов
/ 17 июня 2020

Насколько я понимаю из вашего вопроса: вы хотите динамически изменять значения в полях на основе выбора в раскрывающемся списке.

Это можно сделать за 3 шага:

  1. Прочитать значение из раскрывающегося списка
  2. На основе значения выше получить данные для размещения
  3. Обновите HTML с правильным идентификатором, чтобы отобразить правильные данные

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

const sampleData = {
  "0": [30, 2, 18, 6],
  "1": [435, 234, 38, 84],
  "2": [464, 34, 49, 33],
  "3": [342, 96, 60, 74]
};

const setValues = () => {
  const val = document.getElementById("selection").value;

  document.getElementById("new-orders").textContent = sampleData[val][0];
  document.getElementById("in-process").textContent = sampleData[val][1];
  document.getElementById("approved").textContent = sampleData[val][2];
  document.getElementById("rejected").textContent = sampleData[val][3];
};

// setting values initially
setValues();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <div class="row">
    <div class="ml-auto">
    <select class="custom-select" id="selection" onchange="setValues()">
        <option value="0" selected>Loans</option>
        <option value="1">Home appliances</option>
        <option value="2">Cable tv</option>
        <option value="3">Internet</option>
    </select>
    </div>
    </div>
    <div class="row">
      <!-- column -->
      <div class="col-xs-4">
          <div class="card bg-info text-white  card-hover">
              <div class="card-body">
                  <h3 class="card-title m-b-0">New orders</h3>
                  <div class="align-items-center">
                      <div class="p-t-20 text-center">
                         <span class="display-4 d-block font-medium" id="new-orders">368</span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!-- column -->
      <div class="col-xs-4">
          <div class="card bg-secondary text-white  card-hover">
              <div class="card-body">
                  <h3 class="card-title m-b-0">In process</h3>
                  <div class="align-items-center">
                      <div class="p-t-20 text-center">
                         <span class="display-4 d-block font-medium" id="in-process">257</span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!-- column -->
      <div class="col-xs-4">
          <div class="card bg-success text-white  card-hover">
              <div class="card-body">
                  <h3 class="card-title m-b-0">Approved</h3>
                  <div class="align-items-center">
                      <div class="p-t-20 text-center">
                         <span class="display-4 d-block font-medium" id="approved">86</span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
       <div class="col-xs-4">
          <div class="card bg-danger text-white  card-hover">
              <div class="card-body">
                  <h3 class="card-title m-b-0">Rejected</h3>
                  <div class="align-items-center">
                      <div class="p-t-20 text-center">
                         <span class="display-4 d-block font-medium" id="rejected">25</span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...