html输入没有在jquery中返回正确的值答案

【问题标题】：html input not return the correct value in jqueryhtml输入没有在jquery中返回正确的值
【发布时间】：2015-11-26 08:20:26
【问题描述】：

我整夜都在玩这段代码，但我不知道为什么它没有返回正确的语句：

<input id="price_item" discount="10" more_order="20" type="text" name="co-price-item" value="0" onChange="selection()"/>

function selection(){   

var discount    =  $('#price_item').attr('discount'); 
var more_order  =  $('#price_item').attr('more_order');                                
var input_value =  $('#price_item').val();

if(input_value > more_order) {
            alert('yes : '+input_value+' > '+more_order);   
            }else{
            alert('no : '+input_value+' < '+more_order);                
            }
    }

代码有什么问题导致它已经通过输入从 3 开始的输入值返回 yes。我希望如果高于 20 则返回 yes。

我尝试过使用

var input_value =  document.getElementById("price_item").value;

但仍然得到相同的结果。

【问题讨论】：

标签： jquery html

【解决方案1】：

我认为你必须使用 parseFloat() 或 parseInt();

var discount    =  parseInt($('#price_item').attr('discount')  , 10); 
var more_order  =  parseInt($('#price_item').attr('more_order')  , 10);                                
var input_value =  parseInt($('#price_item').val()  , 10);

Behavior difference between parseInt() and parseFloat()

【讨论】：

我的上帝……你是对的。有用。对你来说太简单了。实际上我已经尝试过这种方法，但最后没有 (,10) 并且它不起作用。上帝保佑你..

【解决方案2】：

那些不是有效的 HTML 属性；为了使您的代码成为有效的 HTML5，您需要在自定义属性前面加上 data-，然后通过 jQuery 的 data() 访问它们：

<input id="price_item" data-discount="10" data-more_order="20" type="text" name="co-price-item" value="0" onChange="selection()"/>

function selection() {   

  var discount    =  $('#price_item').data('discount'); 
  var more_order  =  $('#price_item').data('more_order');                                
  var input_value =  $('#price_item').val();

  if (input_value > more_order) {
    alert('yes : '+input_value+' > '+more_order);   
  } else {
    alert('no : '+input_value+' < '+more_order);                
  }
}

【讨论】：

之所以有效是因为 jQuery .data() 自动将属性值解析为 JSON，因此它将字符串转换为数字。不是因为他使用了无效属性。

【解决方案3】：

当像这样使用 parseInt 时这会起作用：

var more_order  =  parseInt($('#price_item').attr('more_order'));

这是一个 JSFiddle： JSFiddle

【讨论】：

【解决方案4】：

您不能在 HTML 的 input 标记中添加自定义属性，例如 discount 或 more_order。有一些预定义的属性（See here）

查看来自 StackOverflow 的 this 帖子。

【讨论】：

这不是他的程序失败的原因。
@Psyringe 我感谢你的好建议。但是，当代码通过使用上面 Mohamed-Yousef 的答案工作时。使用该属性我们会得到什么补偿？
确实没有失败。但这不是解决方案的正确方法。正如@nathanhleung 所说，此功能仅在HTML5 中可用，并且前面有一个data-。

【解决方案5】：

由于input_value 和more_order 都是字符串，因此您将进行字符串比较而不是数字比较。
将值转换为数字以获得所需的比较。

见http://www.ecma-international.org/ecma-262/5.1/#sec-11.8.5

【讨论】：