Jquery根据输入变化重新计算所有其他输入

【问题标题】：Jquery re-calculating all other inputs based on input changeJquery根据输入变化重新计算所有其他输入
【发布时间】：2020-05-05 03:51:21
【问题描述】：

我正在尝试创建批量价格更改表单，但我无法选择当前价格。

我尝试使用 .each 函数进行更新，但它不会在输入更改时更新。 （也是 currentfiyat+miktar 没有按预期工作）

我为我的表单创建了一支笔；它可以告诉你更多：https://codepen.io/exspet/pen/zYxmaPR

$(document).ready(function() {

  $('#c-siteprice').on('input', function() {
    var miktar = $(this).val();
    $('.samount').html(miktar);
    $('.sfinal').show();

    $(".sfinalprice").each(function() {
      var currentfiyat = $(this).val();
      var newfiyat = currentfiyat + miktar;
      $('.sfinalprice').val(newfiyat);
    });

  });


  $('.sdo').on('click', function() {
    if ($(this).val() == 's-add') {
      var islem = '<span class="glyphicon glyphicon-plus"></span>';
    } else if ($(this).val() == 's-tract') {
      var islem = '<span class="glyphicon glyphicon-minus"></span>';
    } else if ($(this).val() == 's-change') {
      var islem = '<span class="glyphicon glyphicon-forward"></span>';
    }
    $('.sadorremove').html(islem);
  });

});
/* body{padding: 15px;} */

img {
  max-width: 150px;
  height: auto;
}


/* li:hover{ background-color:#D8E8F5;}
	li:hover ul li{ background-color: #fff;} */

li:hover ul li:hover {
  background-color: #D8E8F5;
}

.navbar-brand img {
  max-height: 200%;
  margin-top: -10px;
}

hr {
  margin-top: 12px;
  margin-bottom: 12px;
}

.btn-link {
  padding: 6px 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.css">
<script type="text/javascript" src="//cdn.datatables.net/fixedheader/2.1.1/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedheader/2.1.1/css/dataTables.fixedHeader.css">
<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/css/dataTables.checkboxes.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/js/dataTables.checkboxes.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/pstyle.css">
<!--Içerik-->

</script>
<div class="container-fluid">
  <table class="table table-bordered table-hover table-striped">
    <tr>
      <td></td>
      <td>
        <input class="sdo" name="sdo" id="s-add" type="radio" value="s-add"> <label for="s-add">Add</label>
        <input class="sdo" name="sdo" id="s-tract" type="radio" value="s-tract"> <label for="s-tract">Subtract</label>
        <input class="sdo" name="sdo" id="s-change" type="radio" value="s-change"> <label for="s-change">Change</label>
        <input id="c-siteprice" class="txt" type="text" size="4" name="txt" />
      </td>
      <td><input id="c-ebayprice" class="txt" type="text" size="4" name="txt" /></td>
    </tr>
    <tr>

      <td>INC International Concepts Faux-Fur Cross Band Slippers (Black, S)</td>
      <td class="siteprice">
        19.49 <span class="sadorremove"></span>
        <span class="samount"></span>
        <span class="sfinal" style="display:none;">
						<span style="font-weight: bold;font-size: 18px;"> = </span>
        <input class="sfinalprice" name="sprice-99814" type="text" size="4" value="19.49" />
        </span>
      </td>
      <td>20.82</td>
    </tr>
    <tr>

      <td>INC International Concepts INC Fluffy Faux-Fur Scuff Slippers (Ivory, L)</td>
      <td class="siteprice">
        9.60 <span class="sadorremove"></span>
        <span class="samount"></span>
        <span class="sfinal" style="display:none;">
						<span style="font-weight: bold;font-size: 18px;"> = </span>
        <input class="sfinalprice" name="sprice-144526" type="text" size="4" value="9.60" />
        </span>
      </td>
      <td>10</td>
    </tr>
    <tr>

      <td>INC International Concepts INC Fluffy Faux-Fur Scuff Slippers (Ivory, XL)</td>
      <td class="siteprice">
        9.60 <span class="sadorremove"></span>
        <span class="samount"></span>
        <span class="sfinal" style="display:none;">
						<span style="font-weight: bold;font-size: 18px;"> = </span>
        <input class="sfinalprice" name="sprice-144527" type="text" size="4" value="9.60" />
        </span>
      </td>
      <td>10</td>
    </tr>
    <tr>

      <td>INC International Concepts Beverage Icon Velour Slippers (Black, L/M)</td>
      <td class="siteprice">
        9.60 <span class="sadorremove"></span>
        <span class="samount"></span>
        <span class="sfinal" style="display:none;">
						<span style="font-weight: bold;font-size: 18px;"> = </span>
        <input class="sfinalprice" name="sprice-144529" type="text" size="4" value="9.60" />
        </span>
      </td>
      <td>10.91</td>
    </tr>
    <tr>

      <td>INC International Concepts Womens Love Velour Scuff Slippers (Light Pink, XL)</td>
      <td class="siteprice">
        9.60 <span class="sadorremove"></span>
        <span class="samount"></span>
        <span class="sfinal" style="display:none;">
						<span style="font-weight: bold;font-size: 18px;"> = </span>
        <input class="sfinalprice" name="sprice-144533" type="text" size="4" value="9.60" />
        </span>
      </td>
      <td>10.91</td>
    </tr>
    <tr>

      <td>INC International Concepts Faux-Marabou Slide Slippers (Medium Pink, L/M)</td>
      <td class="siteprice">
        23.38 <span class="sadorremove"></span>
        <span class="samount"></span>
        <span class="sfinal" style="display:none;">
						<span style="font-weight: bold;font-size: 18px;"> = </span>
        <input class="sfinalprice" name="sprice-138066" type="text" size="4" value="23.38" />
        </span>
      </td>
      <td>24.99</td>
    </tr>
    <tr>
      <td>INC International Concepts Women's Tassel Slippers (Leopard, S)</td>
      <td class="siteprice">
        11.51 <span class="sadorremove"></span>
        <span class="samount"></span>
        <span class="sfinal" style="display:none;">
						<span style="font-weight: bold;font-size: 18px;"> = </span>
        <input class="sfinalprice" name="sprice-131204" type="text" size="4" value="11.51" />
        </span>
      </td>
      <td>13.08</td>
    </tr>
    <tr>

      <td>INC International Concepts Women's Faux-Marabou Slide Slippers (Wine, M)</td>
      <td class="siteprice">
        11.51 <span class="sadorremove"></span>
        <span class="samount"></span>
        <span class="sfinal" style="display:none;">
						<span style="font-weight: bold;font-size: 18px;"> = </span>
        <input class="sfinalprice" name="sprice-131202" type="text" size="4" value="11.51" />
        </span>
      </td>
      <td>13.08</td>
    </tr>
    <tr>

      <td>INC International Concepts Women's Tassel Slippers (Leopard, M)</td>
      <td class="siteprice">
        11.51 <span class="sadorremove"></span>
        <span class="samount"></span>
        <span class="sfinal" style="display:none;">
						<span style="font-weight: bold;font-size: 18px;"> = </span>
        <input class="sfinalprice" name="sprice-131203" type="text" size="4" value="11.51" />
        </span>
      </td>
      <td>13.08</td>
    </tr>
  </table>
</div>
<!--/Içerik-->
</body>

</html>

【问题讨论】：

  • 我给你做了一个sn-p。我还为您的代码选择了更新的 jQuery
  • $(this).val(newfiyat);
  • 投票关闭此问题，因为它是由无法再复制的错字或问题引起的。虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。
  • 感谢您更新我的帖子，这样看起来更具可读性。我的问题不是错字，但我不能确切地说出它是什么。我也相信这个表格可以被其他初学者使用并帮助未来的读者。
  • 不。太复杂的表格对未来的访问者没有任何兴趣，并且 vars 是土耳其语。您还需要将值转换为数字：var newfiyat = +currentfiyat + +miktar;

标签： javascript jquery input each


【解决方案1】：

有两件事你应该考虑

  1. 您应该将值从string 解析为float，如parseFloat(miktar)
  2. 你应该添加一个数据属性来归档像data-unitprice="19.49"这样的单价，然后你可以得到像var unitPrice = $(item).data('unitprice')这样的值 
$(".sfinalprice").each(function(index, item) {
       var unitPrice = $(item).data('unitprice');
       var newfiyat = parseFloat(unitPrice) + parseFloat(miktar);

       $(item).val(newfiyat);
});

查看下面的现场演示

$(document).ready(function() {

  $('#c-siteprice').on('input', function() {
    var miktar = $(this).val();
    $('.samount').html(miktar);
    $('.sfinal').show();

   $(".sfinalprice").each(function(index, item) {
       var unitPrice = $(item).data('unitprice');
       var newfiyat = parseFloat(unitPrice) + parseFloat(miktar);
    
       $(item).val(newfiyat);
    });

  });


  $('.sdo').on('click', function() {
    if ($(this).val() == 's-add') {
      var islem = '<span class="glyphicon glyphicon-plus"></span>';
    } else if ($(this).val() == 's-tract') {
      var islem = '<span class="glyphicon glyphicon-minus"></span>';
    } else if ($(this).val() == 's-change') {
      var islem = '<span class="glyphicon glyphicon-forward"></span>';
    }
    $('.sadorremove').html(islem);
  });

});
/* body{padding: 15px;} */

img {
  max-width: 150px;
  height: auto;
}


/* li:hover{ background-color:#D8E8F5;}
	li:hover ul li{ background-color: #fff;} */

li:hover ul li:hover {
  background-color: #D8E8F5;
}

.navbar-brand img {
  max-height: 200%;
  margin-top: -10px;
}

hr {
  margin-top: 12px;
  margin-bottom: 12px;
}

.btn-link {
  padding: 6px 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.css">
<script type="text/javascript" src="//cdn.datatables.net/fixedheader/2.1.1/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedheader/2.1.1/css/dataTables.fixedHeader.css">
<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/css/dataTables.checkboxes.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/js/dataTables.checkboxes.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/pstyle.css">
<!--Içerik-->
</script>
<div class="container-fluid">
    <table class="table table-bordered table-hover table-striped">
        <tr>
            <td></td>
            <td>
                <input class="sdo" name="sdo" id="s-add" type="radio" value="s-add"> <label for="s-add">Add</label>
                <input class="sdo" name="sdo" id="s-tract" type="radio" value="s-tract"> <label for="s-tract">Subtract</label>
                <input class="sdo" name="sdo" id="s-change" type="radio" value="s-change"> <label for="s-change">Change</label>
                <input id="c-siteprice" class="txt" type="text" size="4" name="txt" />
            </td>
            <td><input id="c-ebayprice" class="txt" type="text" size="4" name="txt" /></td>
        </tr>
        <tr>

            <td>INC International Concepts Faux-Fur Cross Band Slippers (Black, S)</td>
            <td class="siteprice">
                19.49 <span class="sadorremove"></span>
                <span class="samount"></span>
                <span class="sfinal" style="display:none;">
                    <span style="font-weight: bold;font-size: 18px;"> = </span>
                    <input class="sfinalprice" name="sprice-99814" type="text" size="4" data-unitprice="19.49" value="19.49" />
                </span>
            </td>
            <td>20.82</td>
        </tr>
        <tr>

            <td>INC International Concepts INC Fluffy Faux-Fur Scuff Slippers (Ivory, L)</td>
            <td class="siteprice">
                9.60 <span class="sadorremove"></span>
                <span class="samount"></span>
                <span class="sfinal" style="display:none;">
                    <span style="font-weight: bold;font-size: 18px;"> = </span>
                    <input class="sfinalprice" name="sprice-144526" type="text" size="4" data-unitprice="9.60" value="9.60" />
                </span>
            </td>
            <td>10</td>
        </tr>
    </table>
</div>
<!--/Içerik-->
</body>

</html>

【讨论】：

  • 感谢您的回答，我相信我们已经接近实现我的目标。但我有两个问题；
  • 1-) 当我尝试输入一个数字（例如 1）到顶部输入（miktar）时； newfiyat 值更改为 19.491（但它必须更改为 20.49）所以求和不起作用（我不知道为什么）2-) 当值更改时，currentfiyat 更改为新值但 currentfiyat 需要保持原样（也许我们可以通过添加另一个隐藏输入来归档它，但我不知道如何获得该值）
  • 我刚刚更新了我的答案，请看@exspet
猜你喜欢
  • 1970-01-01
  • 2019-07-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-23
  • 1970-01-01
  • 2019-05-29
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode