使用.val（）計算輸入jQuery

Question

我正在處理一個項目，我必須對輸入字段的現有值進行一些計算。假設輸入值是400或其他。

下方我有一個選擇框YES手段添加，NO手段添加或-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> 

的jQuery：

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 */ 

我試圖查找現有的例子，但我沒有找到很多例子都非常感謝您的回答！

Answer 1

的邏輯，這是一個比較複雜的。您需要知道在no已被點擊之前是否已添加425，在這種情況下，您需要減去425，而不是僅添加0。

考慮到這一點，你可以一個data屬性添加到輸入包含它的起拍價：

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

然後當select改變，你可以將數據屬性轉換爲整數，然後進行計算在上面。試試這個：

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')); 
     }   
    }); 
}); 

Example fiddle

Answer 2

使用此：

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/

Answer 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>

Answer 4

這。

的jQuery：

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/