麻烦在jQuery中使用typeof运算符

时间:2013-04-29 01:56:03

标签: javascript jquery typeof

这将是我第一次提出问题,“我是编程新手”(哎呀)。我会直接进入它:

这是我的HTML代码:

<div class="hide" id="hide2">
    <div class="inputselect">   
    <p>
        <label>What is your budget?</label>
        </p>
        <p>
            Minimum: $<input type="text" id="minBud" name='minBud'><br />
            Maximum: $<input type="text" id="maxBud" name='maxBud'><br />
        <br />
        </p>
        <button type="button" class="next" id="next3">Next</button>
        <button type="button" class="prev" id="prev2">Previous</button> 
    </div>
</div>

这是我正在努力的jQuery / javascript代码片段:

$("#next3").click(function(){
    if (typeof $("#minBud").val() === "number" && typeof $("#maxBud").val() === "number") { 
        gunsPrice();
        $("#hide3").slideDown("fast");
        $("#hide2").slideUp("fast");
    } else {
        alert("Please only enter NUMBERS into the budget fields");
    }
});

我希望看到的是:如果minBudmaxBud字段是数字,请运行gunsPrice()并显示下一个问题(HTML表单)。

我尝试过几种不同的方法来改变语法,但无论我怎么做,数字都会继续触发alert

注意:我可以让typeof运算符在gunsPrice()内正常运行(使用getElementById收集的变量,但这对我没有任何影响在这个应用程序中很好;它总是移动到下一个问题(由于我设置jQuery代码的方式)。

谢谢!

3 个答案:

答案 0 :(得分:3)

.val()始终返回输入字符串。所以你的条件总是会评估为假。但是,您可以检查结果是否只包含数字(如果这是您要查找的内容)

if (/^\d+$/.test($("#minBud").val()) && /^\d+$/.test($("#maxBud").val())) {

答案 1 :(得分:1)

我现在看到你可以在jQuery中添加钩子,所以.val()可以返回一个数字。您可以使用以下代码挂钩到val():

$.valHooks.text={
  get:function(elem){
    var i=parseFloat(elem.value,10);
    return (isNaN(i))?elem.value:i
  }
}

现在任何输入类型文本的val()都将返回一个字符串或数字,具体取决于它是否可以转换。

这可能会令人困惑,因为输入类型是TEXT。

您可以使用$ valHooks.number并设置类型编号的输入,但在Firefox 20.0.1中尝试过此操作并且无效。

这是因为jQuery尝试使用

获取钩子
jQuery.valHooks[ elem.type ] 

由于FireFox在请求类型为“number”的elem.type时会返回“text”,因此它不会调用你的钩子并返回elem.value属性,它是字符串。这可能是FireFox中的一个错误

elem.getAttribute("type")

返回“数字”

克服此错误的一种方法是进入jQuery源代码并更改以下行:

hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ]
  || jQuery.valHooks[ elem.getAttribute("data-type") ];

现在,在您的html中,您可以通过以下方式指定数字输入字段:

<input type="number" data-type="number" ...

添加一个nubmer hook:

$.valHooks.number={...//see code above for the rest

答案 2 :(得分:0)

$("#minBud").val()中,#minBud是输入或文本区域。

您的操作:

typeof $("#minBud").val() 

是&#34;字符串&#34;。

parseInt($("#minBud").val(),10) === null