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

问题描述 投票：2回答：1

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

我已经尝试使用.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>
javascript jquery input each
1个回答
0
投票

您应该考虑两件事

  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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.