使用 .val(） 的输入 jQuery 进行计算

Calculate with .val() of input jQuery

本文关键字：jQuery 计算 输入 val 使用      更新时间：2023-09-26

我正在做一个项目，我必须对输入字段的现有值进行一些计算。 假设输入值是 400 或其他值。

下面我有一个选择框 YES 表示添加 425，NO 表示添加 0 或减去 -425;

.HTML：

<input id="priceTag" name="priceTag" type="text" value="400">
<select id="designChoice" name="designChoice">
     <option>Choose--</option>
     <option value="yes">yes</option>
     <option value="no">no</option>
</select>

j查询：

jQuery(document).ready(function($){
    var priceTag = $('#priceTag');        
    $('#designChoice').on('change', function(){
        if($(this).val()==='yes'){              
          /* Here i want to add + 425 to the */
        }else{
          /* Here I want to add nothing to the input or substract -425 */   
        }
    });
});

我尝试过：

priceTag.val(+ 425);
/* And more of this type of wrong code ;-P */

我试图查找现有示例，但没有找到很多示例，因此提前感谢您的答案！

这样做的逻辑有点复杂。您需要知道在单击no之前是否已添加425，在这种情况下，您需要减去425，而不仅仅是添加0。

考虑到这一点，您可以向输入添加data属性以包含其起始价格：

<input id="priceTag" name="priceTag" type="text" value="400" data-default="400">

然后，当select更改时，您可以将 data 属性转换为整数，然后对其执行计算。试试这个：

jQuery(document).ready(function ($) {
    var $priceTag = $('#priceTag');        
    $('#designChoice').on('change', function () {
        if ($(this).val() === 'yes') {
            $priceTag.val(parseInt($priceTag.data('default'), 10) + 425);            
        } else {
            $priceTag.val($priceTag.data('default'));
        }        
    });
});

示例小提琴

使用这个：

.JS： 

jQuery(document).ready(function($){
    var priceTag = $('#priceTag');        
    var selectedYes=false;
    $('#designChoice').on('change', function(){
        if($(this).val()==='yes'){              
          /* Here i want to add + 425 to the */
            selectedYes=true;
            priceTag.val( ( +priceTag.val() ) + 425 );
        }else if (selectedYes){
          /* Here I want to add nothing to the input */ 
            priceTag.val( ( +priceTag.val() ) - 425 );
            selectedYes=false;
        }
    });
});

JSFIDDLE： http://jsfiddle.net/ghorg12110/0xvkupe2/1/

来了。

j查询：

var priceTagAns = 0;   
$(document).ready(function(){   
    $('#designChoice').on('change', function(){
        if($(this).val()==='yes'){              
          /* Here i want to add + 425 to the */
           priceTagAns = (Number($("#priceTag").val()) + 425);
        }else{
          /* Here I want to add nothing to the input */ 
            priceTagAns = (Number($("#priceTag").val()));
        }
        alert(priceTagAns);
    });
});

警报只是为了证明值已设置，随心所欲地使用它。

工作 JSFiddle： http://jsfiddle.net/89z7qpkf/2/

*更新*

还有可变版本：http://jsfiddle.net/89z7qpkf/3/

在

页面加载时以及用户更改数据属性时将 #priceTag 的值保存到数据属性：

jQuery(document).ready(function($){
    var priceTag = $('#priceTag'),
        designChoice = $('#designChoice');
    
    //save initial value and whenever it is changed to a data attribute
    priceTag.on('change', function() {
        $(this).data('value', this.value);
        designChoice.change();
    })
    .change();
    designChoice.on('change', function(){
        if($(this).val()==='yes') {
            /* Here i want to add + 425 to the */
            priceTag.val( +priceTag.data('value') + 425 );
        } else{
            /* Here I want to add nothing to the input or substract -425 */ 
            priceTag.val( priceTag.data('value') );
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="priceTag" name="priceTag" type="text" value="400">
<select id="designChoice" name="designChoice">
     <option>Choose--</option>
     <option value="yes">yes</option>
     <option value="no">no</option>
</select>

相关文章：