Многократный расчет не работает должным образом - PullRequest
Новая
       1

Многократный расчет не работает должным образом

0 голосов
/ 24 января 2020

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

Как я могу это сделать? 

$(function() {
  $('.form-control').keyup(function() {
    $('.input-number').text($(this).val());
    $('.total').text($('.static-number').text() * $('.input-number').text());
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container text-center">
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="type a number">
    <div class="row">
      <div class="col-3"><span>Static Number</span></div>
      <div class="col-3"><span>Multiply</span></div>
      <div class="col-3"><span>input number</span></div>
      <div class="col-3"><span>Total</span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
  </div>
</div>

Ответы [ 7 ]

1 голос
/ 24 января 2020

Вы должны пройти через каждый элемент для расчета суммы соответствующих строк.

Попробуйте следующий код: 

$(function() {

  $('.form-control').keyup(function() {

    $('.input-number').text($(this).val());
    
    $('.row').each((i, obj) => {
      $(obj).children('.total').text($(obj).children('.static-number').text() * $(this).val());
    });

  });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container text-center">
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="type a number">
    <div class="row">
      <div class="col-3"><span>Static Number</span></div>
      <div class="col-3"><span>Multiply</span></div>
      <div class="col-3"><span>input number</span></div>
      <div class="col-3"><span>Total</span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>3</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
  </div>
</div>
1 голос
/ 24 января 2020

Проблема в том, что когда у вас есть несколько элементов, ваш селектор вернет список элементов, а .text() объединит все их значения.

Так что, если вы добавите 3 в текстовое поле, вы получите "33" для .input-number и "22" для .static-number. Вам нужно будет выбрать только первый элемент для этого расчета.

Ниже приводится образец: 

$(function() {
  $('.form-control').keyup(function() {
    const value = $(this).val();
    $('.input-number').text(value);
    
    console.log(`Your equation is processed as: ${$('.static-number').text()} * ${ $('.input-number').text() }`, )
    $('.total').text($('.static-number:first').text() * value);
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container text-center">
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="type a number">
    <div class="row">
      <div class="col-3"><span>Static Number</span></div>
      <div class="col-3"><span>Multiply</span></div>
      <div class="col-3"><span>input number</span></div>
      <div class="col-3"><span>Total</span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
  </div>
</div>
1 голос
/ 24 января 2020

Вам необходимо l oop пройти через классы и выполнить расчеты. 

$(function() {
  $('.form-control').keyup(function() {
    $('.input-number').text($(this).val());
    $('.static-number').each(function(){
     var currentElement = $(this);
     var static_num = currentElement.parent().find('div.static-number').text();
     var input_num = currentElement.parent().find('div.input-number').text();
     currentElement.parent().find('div.total').text(static_num*input_num)
    })
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container text-center">
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="type a number">
    <div class="row">
      <div class="col-3"><span>Static Number</span></div>
      <div class="col-3"><span>Multiply</span></div>
      <div class="col-3"><span>input number</span></div>
      <div class="col-3"><span>Total</span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
    <div class="row">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
  </div>
</div>
0 голосов
/ 24 января 2020

Вот простое решение, просто отредактируйте javascript

`

<script type="text/javascript">
  $('.form-control').keyup(function() {
        var static = $(".static-number span").html();
        var number = $(this).val();
        var total = static * number;
        $(".input-number span").text(number);
        $(".total span").text(total);
  });
</script>

`

0 голосов
/ 24 января 2020

Это не работает, потому что имена классов конфликтуют при доступе к значениям.

Попробуйте вот так.

js: 

$(function() {
  $('.form-control').keyup(function() {
  for(var i=0;i<$('.row_count').length;i++)
  {
   $('.input-number_row'+i).text($(this).val());
  $('.total_row'+i).text($('.static-number_row'+i).text() *$(this).val())
  }
  });
});

Html: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container text-center">
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="type a number">
    <div class="row">
      <div class="col-3"><span>Static Number</span></div>
      <div class="col-3"><span>Multiply</span></div>
      <div class="col-3"><span>input number</span></div>
      <div class="col-3"><span>Total</span></div>
    </div>
    <div class="row row_count" >
      <div class="col-3 static-number_row0"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number_row0"><span></span></div>
      <div class="col-3 total_row0"><span></span></div>
    </div>
    <div class="row row_count">
      <div class="col-3 static-number_row1"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number_row1"><span></span></div>
      <div class="col-3 total_row1"><span></span></div>
    </div>
  </div>
</div>
0 голосов
/ 24 января 2020

Добавьте класс в строку, для которой вы хотите вычислить значение row_body и l oop через этот класс. 

$(function() {
  $('.form-control').keyup(function() {
  	let inputVal = $(this).val();
    $('.input-number').text(inputVal);    
   	$('.row_body').each(function(){
    		$(this).children('.total').text(parseFloat($(this).children('.static-number').text()) * parseFloat(inputVal));
     })
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.coma/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container text-center">
  <div class="col-md-4">
    <input type="text" class="form-control" placeholder="type a number">
    <div class="row">
      <div class="col-3"><span>Static Number</span></div>
      <div class="col-3"><span>Multiply</span></div>
      <div class="col-3"><span>input number</span></div>
      <div class="col-3"><span>Total</span></div>
    </div>
    <div class="row row_body">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
    <div class="row row_body">
      <div class="col-3 static-number"><span>2</span></div>
      <div class="col-3"><span>*</span></div>
      <div class="col-3 input-number"><span></span></div>
      <div class="col-3 total"><span></span></div>
    </div>
  </div>
</div>
0 голосов
/ 24 января 2020 
$(...)

возвращает список совпадающих элементов. Функции, например text, знают, как себя вести, когда этот список содержит один элемент, но не когда он содержит несколько элементов. вам нужно действовать индивидуально.

Вы захотите сделать что-то вроде: 

$('row').each(elem => {
  const sn = $(elem).find('.static-number').text()
  const input = $(elem).find('.input-number').text()
  $(elem).find('.total').text(sn * input)
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...