文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >多重计算不能正常工作。

问多重计算不能正常工作。
EN

Stack Overflow用户
提问于 2020-01-24 06:08:13
回答 7查看 98关注 0票数 0

在输入控件中输入一个数字之后，下面将显示它在使用单行时正在处理的乘法，但是当我使用多行时，它不起作用。

我该怎么做呢？

​

代码语言：javascript
复制
$(function() {
  $('.form-control').keyup(function() {
    $('.input-number').text($(this).val());
    $('.total').text($('.static-number').text() * $('.input-number').text());
  });
});
代码语言：javascript
复制
<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>

​

css
javascript
jquery
html
EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2020-01-24 06:23:26

您需要遍历类并执行计算。

​

代码语言：javascript
复制
$(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)
    })
  });
});
代码语言：javascript
复制
<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
EN

Stack Overflow用户

发布于 2020-01-24 06:26:34

问题是，当您有多个元素时，选择器将返回一个元素列表，而.text()将连接它们的所有值。

因此，如果在文本框中添加3，您将得到.input-number的"33"和.static-number的"22"。您必须只获取此计算的第一个元素。

以下为样本：

​

代码语言：javascript
复制
$(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);
  });
});
代码语言：javascript
复制
<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
EN

Stack Overflow用户

发布于 2020-01-24 06:39:33

您必须遍历每个元素来计算各个行的和。

试试下面的代码：

​

代码语言：javascript
复制
$(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());
    });

  });

});
代码语言：javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/59891186

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档