Question

我是jQuery / Javascript的新手。我不想使用任何插件。但是我想问一下如何用我的正/负微调器的每个值进行价格计算。这是演示

      <div  style="width: 960px; display: inline-block; margin-left: 15px;">

      <div style="margin-top: 20px; float: left; margin-left:40px;">Produkt name</div>

      <div style="margin-top: 20px; float: left; margin-left:80px;"> Qty</div>

     <div style="margin-top: 20px; float: left; margin-left:80px; margin-right:80px;">Price</div>

      <div style="margin-top: 20px; ">Amount</div>

    <div style="margin-top: 20px; float: left; margin-left:40px;">Produkt1</div>


        <div style="margin-top: 20px; float: left;"><div class="container333 style="width: 52px;  height: 25px;">
        <div class="left333" style="float: left; ">
               <input type="text" name="number" value="1"  class="qty"  id="input" style="width:30px; margin-left:100px;" />
              <div class="right333" style="float: right;">
            <div id="Up" class="fa fa-chevron-up">+</div>
               <div id="Down"   class="fa fa-chevron-down">-</div>
               </div>
        </div>
        </div></div>

            <div style="margin-top: 20px; float: left;"><input type="text" value="11.60" class="price" style="width:50px; margin-left:60px;"</div>


               <div class="last-5" style=" margin-top: -20px;"><span id="amount1" class="amount1" style="width:50px; margin-left:180px;">0</span> eur</div>


                </div>

          #Up{
      text-align: center;
      width: 20px;
      height: 10px;
     float: right;
     margin-right: 0px;
       margin-top: 0px;
     background-color: #dddddd;
      border: none;
    border-bottom: 1px solid #bababa;
     font-size: 9px;
       font-color:#333333;
     line-height: 9px;
          }

          #Down{
         text-align: center;
         width: 20px;
       height: 10px;
      float: right;
      margin-right: -20px;
      margin-top: 11px;
       background-color: #dddddd;
      border: none;
      font-size: 9px;
           font-color:#333333;
        line-height: 9px;
              }

      var min = 0,
max = 13;

     jQuery("#Up").click(function(){
        if(jQuery("#input").val() < max && jQuery("#input").val() >= min )
         jQuery("#input").val(Number(jQuery("#input").val()) + 1);  
       });

         jQuery("#Down").click(function(){
        if(jQuery("#input").val() <= max && jQuery("#input").val() > min )
         jQuery("#input").val(Number(jQuery("#input").val()) - 1); 
         });

Answer 1

请参阅fiddle

如果你想要的话，

添加这个。

var val = jQuery("#input").val() * jQuery(".price").val();
jQuery('#amount1').html(val);

还准备好文件：

jQuery( document ).ready(function(){
    var val = jQuery("#input").val() * jQuery(".price").val();
    jQuery('#amount1').html(val);
});

Answer 2

检查一下，

var min = 0,
max = 13;

jQuery("#Up").click(function(){
  if(jQuery("#input").val() < max && jQuery("#input").val() >= min )
  jQuery("#input").val(Number(jQuery("#input").val()) + 1);  

 //alert(1);
 $qty = $("#input").val();
 //alert($qty); 
 $price = $(".price").val();
 $("#amount1").text($qty * $price); 

});

jQuery("#Down").click(function(){
   if(jQuery("#input").val() <= max && jQuery("#input").val() > min )
    jQuery("#input").val(Number(jQuery("#input").val()) - 1); 
    $qty = $("#input").val();
   //alert($qty); 
   $price = $(".price").val();
   $("#amount1").text($qty * $price); 
});

Answer 3

Check this.

如果数量增加，价格会发生变化：

jQuery("#Up").click(function(){
    if(jQuery("#input").val() < max && jQuery("#input").val() >= min ){
        jQuery("#input").val(Number(jQuery("#input").val()) + 1);
        var qty = $('#input').val();
        var total = qty * pri;
        $('#amount1').html(total+' eur');
    }
});

Answer 4

请参阅http://jsfiddle.net/Dc43A/23/

您需要在初始级别和更改事件上进行编写

jQuery("#input").val() * jQuery(".price").val();
jQuery('#amount1').html(val);

Answer 5

hai请尝试此代码，这将有助于

var min = 0,
    max = 13;

jQuery("#Up").click(function(){
  if(jQuery("#input").val() < max && jQuery("#input").val() >= min )
    jQuery("#input").val(Number(jQuery("#input").val()) + 1);  
    $(".amount1").html(parseInt(jQuery("#input").val())*11.60);  
});

jQuery("#Down").click(function(){
  if(jQuery("#input").val() <= max && jQuery("#input").val() > min )
    jQuery("#input").val(Number(jQuery("#input").val()) - 1); 
    jQuery(".amount1").html(parseInt(jQuery("#input").val())*11.60);  
});

Answer 6

检查此http://jsfiddle.net/Dc43A/26/

   $("#amount1").text((jQuery("#input").val()+1)*jQuery(".price").val().toString());

   $("#amount1").text((jQuery("#input").val()-1)*jQuery(".price").val().toString());

使用.Text（）方法...

设置span标签中的计算

jQuery价格计算

6 个答案: