Javascript 基于输入编号表单字段更改价格_Javascript_Jquery

Javascript 基于输入编号表单字段更改价格

javascript jquery

Javascript 基于输入编号表单字段更改价格,javascript,jquery,Javascript,Jquery,我正在尝试根据选中价格选项的数量动态更改价格简单html版本： <div class="km-purchase-form"> <ul> <li class="km-price-options"> <label> <input type="checkbox" name="" id="" class="

我正在尝试根据选中价格选项的数量动态更改价格

简单html版本：

<div class="km-purchase-form">
<ul>

    <li class="km-price-options">
    <label>
        <input type="checkbox" name="" id="" class="" value="0" data-price="58.00">
        <span>$58</span>
    </label>    
    <div>
        x <input type="number" min="1" step="1" data-price="58.00" name="" class="edd-item-quantity" value="1"> 
    </div>  
    </li>
        
    <li class="km-price-options">
    <label>
        <input type="checkbox" checked="checked" name="" id="" class="" value="1" data-price="580.00">
        <span>$580</span>
    </label>        
    <div>
        x <input type="number" min="1" step="1" data-price="580.00" name="" class="edd-item-quantity" value="1">
    </div>
    </li>
    
</ul>

<div class="km-price checked"><div class="km-main-price">$580</div></div>

</div>




$58
x


$580
x


$580

下面是我的js代码：

$('.km-price-options').click(function() {
    var eddValues = [];
    
    $("input[type='checkbox']:checked").each(function(){ 
    
    var val = $(this).attr('data-price');               
    var currency = $(this).attr('data-currency');
    var position = $(this).attr('data-currency-position');
    
        eddValues.push(val);  

        var sum = 0;                    
        $.each(eddValues,function(){
            sum+=parseFloat(this) || 0; 
        });
        
        //edd-item-quantity
        var quantity = $(this).parents('li').find('input.edd-item-quantity');                   
        
        if( quantity ) {
                
        var eddNew = [];
        //var eddNew = [50, 175];
        
        $(quantity).on('input', function() {                        
            quantity.each(function(){

                var index = $(this).val();                              
                var check = $.isNumeric(index);

                if ( !check || check == false || check < 0 ) {
                    return;
                }   
                
                var indexVal = $(this).attr('data-price');
                var total = (index * indexVal);
                
                //*  This is where it goes wrong  *//
                eddNew.push(total);  
                
                var sumAdded = 0;                   
                $.each(eddNew,function(){
                    sumAdded+=parseFloat(this) || 0; 
                });
                
                //console.log( sumAdded );
                
            });
            
        });
        
        
        //
        var final = sum + sumAdded;
        console.log(  final );
        
        /* console.log( sum );
        console.log( sumAdded ); */
            
        
    }
    

    // update final price
    $(this).parents('.km-purchase-form').find('.km-price.checked .km-main-price').text( final );
    
            
    });
    
});

$（'.km价格选项'）。单击（函数（）{
var值=[]；
$（“输入[type='checkbox']：选中”）。每个（函数（）{
var val=$（this.attr（'data-price'）；
var currency=$（this.attr（'data-currency'）；
var position=$（this.attr（'data-currency-position'）；
推送（val）；
var总和=0；
$.each（值，函数（）{
sum+=parseFloat（this）| 0；
});
//edd项目数量
变量数量=$（this.parents（'li'）.find（'input.edd item quantity'）；
如果（数量）{
var eddNew=[]；
//var-eddNew=[50175]；
$（数量）.on（'input'，function（）{
数量。每个（函数（）{
var index=$（this.val（）；
var检查=$.isNumeric（索引）；
如果（！check | | check==false | | check<0）{
返回；
}   
var indexVal=$（this.attr（'data-price'）；
风险价值总额=（指数*指数）；
//*这就是问题所在*//
推送（总计）；
var sumAdded=0；
$.each（新增，函数（）{
sumpadded+=parseFloat（this）| 0；
});
//控制台日志（已添加）；
});
});
//
var final=总和+总和；
控制台日志（最终）；
/*控制台日志（总和）；
控制台日志（已添加）*/
}
//更新最终价格
$（此）.parents（“.km购买表单”）.find（“.km-price.checked.km主价格”）.text（最终）；
});
});

我在这里创建了一个JSFIDLE：

如何根据（多个）勾选价格选项的数量字段正确更新最终价格？

非常感谢在正确方向上的任何帮助。

如果您真正想要的是指向正确的方向，我会简化这一点，首先只担心一个价格选项，让它按照您的意愿工作，然后重复第二个。然后将这两个值相加并显示为“主价格”

希望这能让你走

如果你真正想要的是指向正确的方向，我会简化这一点，首先只考虑一个价格选项，让它按你喜欢的方式工作，然后为第二个重复。然后将这两个值相加并显示为“主价格”

希望这能让你走

请参见下面的工作代码片段示例

我通过更改复选框或留下一个输入字段来触发该功能。您可以通过按钮等将其更改为触发

sumItUp

函数循环遍历每个

km价格选项

div，并获取

价格

、

数量

和

检查标记/F

。如果选中，

sumItUp

将

数量

乘以

价格

（调用该总和

tt

），并将其添加到

ttl

。就像关岛人汉克·约翰逊一样简单

启用多选项购买模式时*/ $（'.edd项目数量'）.keyup（函数（）{ sumItUp（）； }); $（'.edd物料数量，输入[type=“checkbox”]”）。更改（函数（）{ sumItUp（）； }); 函数sumItUp（）{ var-ttl=0； $（“.km价格选项”）。每个（功能（i、v）{ 设cb=$（v）.find（'input[type=checkbox]'）；设pr=cb.数据（“价格”）；设ch=cb.is（':checked'）；设nm=$（v）.find（'input[type=number]'）.val（）；变量tt=nm！=''？+nm*+pr:0； ttl+=（ch==真）？+tt:0； //控制台日志（ttl）； }); $（'.km main price'）.html（`FINAL TTL:${TTL}`）； }




$58
x


$580
x