Блог

Главная - Вопросы по программированию - изменение значения `value` с помощью переменной для нескольких полей `’

изменение значения `value` с помощью переменной для нескольких полей `’

#jquery

#jquery

Вопрос:

Несколько полей ввода задают значение с помощью переменной, называемой множителем. При каждом вводе я добавлял новый пользовательский атрибут с именем my_value, который вычисляется на основе выпадающего списка 3 и целевой таблицы с соответствующими значениями. Я могу правильно рассчитать каждый ввод и выполнять запись в SPAN.

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

 $('#Cherry').val(multiplier);

или использовать для всех входных данных, приведенных ниже, не работает, что не так?

 $("input[type='number']") =multiplier;

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

  1. Общий итог показывает «NaN», если я задаю входное значение по умолчанию и использую строку ниже, общий итог работает нормально ( <input id="Cherry" name="Cherry" class="element text medium" type="text" maxlength="255" value="40" readonly="true"/> )

    результат.текст($(this).val() * множитель);

Если я удалю все значения из пользовательского атрибута input set my_value =»40″, он вычисляет каждый ввод, но общее количество показывает NaN

 result.text($(this).attr("my_value") * multiplier);

<input id="Cherry" name="Cherry" class="element text medium" type="text" maxlength="255" value="" my_value ="40" readonly="true"/>

Например, или более подробное объяснение для моей справочной таблицы **
введите описание изображения здесь
*** Большое спасибо*

 function myCalculate(){
  var volume = $("#Volume").val();
  var productOrigin = $("#ProductOrigin").val();
  var geographicalLocation = $("#GeoLocation").val();
  
  if (volume === "" || productOrigin === "") {
		// alert("Please select the product origin and volume.");
		return;
	}
  
  var tableToUse = geographicalLocation === "" ? productOrigin : geographicalLocation;
  
  $("input[type='text']").each(function(i){
    
    // Current product ID, e.g. "Apple", "Apricot", etc.
	  var currentProductId = $(this).attr('id');
    
    // Amount to multiply.
    var multiplier = $(`table#${tableToUse} tbody > tr[product='${currentProductId}'] > td[volume='${volume}']`).text();
    
    // A <span> element, to be populated with the calculated product volume.
	var result = $("<span name='result'>");

	// Calculate the figure and update the result element.
	result.text($(this).attr("my_value") * multiplier); 

	// Remove any previously added <span> result elements.
	$(this).next("span").remove();

	// Insert result after the current input field.
	$(this).after(result);
    
   
        // to calculate Grand total
        function getInputs(selector) {
          var inputs = 0;
          $(selector).each(function() {
            $(this).find("input").each(function() {
              sum  = parseInt($(this).html());
               $('#').val(parseInt($(this).html()));
            var multiplier = $(`table#${tableToUse} tbody > tr[product='${currentProductId}'] > td[volume='${volume}']`).text();
              //  $('#GrandTotal').val(sum); // give the final sum from Log
            });
          });
          return sum;
        }
    
    // to calculate Grand total
        function getDivSum(selector) {
          var sum = 0;
          $(selector).each(function() {
            $(this).find("span").each(function() {
              sum  = parseInt($(this).html());
               $('#GrandTotal').val(parseInt($(this).html()));
              //  $('#GrandTotal').val(sum); // give the final sum from Log
            });
          });
          return sum;
        }
    
    console.log(getDivSum("#sumDiv"))
    $("#GrandTotal").next().html(getDivSum("#sumDiv"))
    
        $(document).ready(function() {
          console.log(getDivSum("#sumDiv"));
        });

  }); 
  
}


$('.select').on('change', myCalculate);
$("input[type='text']").on('keyup', myCalculate);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label class="description" for="ProductOrigin">Product Origin</label>
  <select class="element select medium" id="ProductOrigin" name="ProductOrigin">
    <option value="" selected="selected"></option>
    <option value="Europe">Europe</option>
    <option value="Asia">Asia</option>
    <option value="China">China</option>
    <option value="India">India</option>
    <option value="USA">USA</option>
    <option value="Africa">Africa</option>
  </select>
</div>

<div>
  <label class="description" for="GeoLocation">Geographical Location</label>
  <select class="element select medium" id="GeoLocation" name="GeoLocation">
    <option value="" selected="selected"></option>
    <option value="England">England</option>
    <option value="Scotland">Scotland</option>
    <option value="Wales">Wales</option>
  </select>
</div>
<div>
  <label class="description" for="Volume">Volume</label>
  <select class="element select medium" id="Volume" name="Volume">
    <option value="" selected="selected"></option>
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
  </select>
</div>

<div id="sumDiv">
<div>
  <label class="description" for="Apple">Apple</label>
  <input id="Apple" name="Apple" class="element text medium" type="text" maxlength="255" value="" my_value ="10" readonly="true"/>
</div>
<div>
  <label class="description" for="Apricot">Apricot</label>
  <input id="Apricot" name="Apricot" class="element text medium" type="text" maxlength="255" value="" my_value ="20" readonly="true"/>
</div>
<div>
  <label class="description" for="Banana">Banana</label>
  <input id="Banana" name="Banana" class="element text medium" type="text" maxlength="255" value="" my_value ="20" readonly="true"/>
</div>

<div>
  <label class="description" for="GrandTotal">Grand Total</label>
  <input id="GrandTotal" name="GrandTotal" class="element text medium" type="text" maxlength="255" value="" readonly="true"/>
</div>

</div>

<table id="Europe">
  <thead>Europe</thead>
  <tr>
    <td>Europe</td>
    <th id=10>10</th>
    <th id=100>100</th>
    <th id=1000>1000</th>
  </tr>
  <tbody>
    <tr product='Apple'>
      <td>Apple</td>
      <td volume='10'>0.1</td>
      <td volume='100'>0.5</td>
      <td volume='1000'>1</td>
    </tr>
    <tr product='Apricot'>
      <td>Apricot</td>
      <td volume='10'>0</td>
      <td volume='100'>0</td>
      <td volume='1000'>0</td>
    </tr>
    <tr product='Banana'>
      <td>Banana</td>
      <td volume='10'>0.1</td>
      <td volume='100'>0.5</td>
      <td volume='1000'>1</td>
    </tr>
  </tbody>
</table>

для тестирования, пожалуйста, выберите Происхождение продукта: Европа, географическое местоположение: пустое и любой объем из выпадающего списка

Комментарии:

1. для тестирования, пожалуйста, выберите Происхождение продукта: Европа и географическое местоположение: пусто

Ответ №1:

Используйте нижеприведенную строку для замены ввода:

   // Insert result after the current input field.
    $(this).after(result);

Чтобы вычислить общее количество, мне удалось устранить проблемы, установка значения для каждого ввода была достигнута с помощью этой строки:

// Вставить результат после текущего поля ввода. $(это).после (результат);

и получение отправки достигается с помощью этой строки

  sum  =  $(this).text();
 //console.log("Value sum " sum);
 $('#GrandTotal').val(sum);