尝试使用blur函数显示<div>元素

时间:2015-04-25 21:23:18

标签: jquery hide show blur

当我从<div class="error">文本框中删除光标时,我试图显示input元素,但它不能使用jquery blur函数。任何帮助将不胜感激。

    <h1>BMI Calculator</h1>
    <p>This is a BMI calculator.</p>
    <div class="error" style="width: 100px, height: 100px, background-color: blue"></div>
    <form action="calc.htm">
        Weight: <input type="number" name="weight_lb">lb<br/>
        <br/>
        Height: <input type="number" name="height_foot">feet
        <input type="number" name="height_in">in
        <br/></br>
        <input id="submit_button" type="submit" value="Calculate" name="calc">
    </form>

    <script>
        $(document).ready(function(){
        $('.error').hide();
            $('input[type="number"]').blur(function(e){
                e.preventDefault();
                $('.error').show();  
            });
        });
    </script>

1 个答案:

答案 0 :(得分:3)

嗨我已检查你的代码你编写的脚本正在运行你的错误是你应该使用的错误框div的样式“;”每个样式参数之间不是“,” 你应该纠正这一行

<div class="error" style="width: 100px, height: 100px, background-color: blue">

并将其替换为:

<div class="error" style="width: 100px; height: 100px; background-color: blue">

检查代码段:

  $(document).ready(function(){
        $('.error').hide();
            $('input[type="number"]').blur(function(e){
                e.preventDefault();
                $('.error').show();  
            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>BMI Calculator</h1>
    <p>This is a BMI calculator.</p>
    <div class="error" style="width: 100px; height: 100px; background-color: blue"></div>
    <form action="calc.htm">
        Weight: <input type="number" name="weight_lb">lb<br/>
        <br/>
        Height: <input type="number" name="height_foot">feet
        <input type="number" name="height_in">in
        <br/></br>
        <input id="submit_button" type="submit" value="Calculate" name="calc">
    </form>