尝试使用模糊功能显示 <div> 元素

Question

我试图让 <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>

Answer 1

您好，我已经检查了您的代码，您编写的脚本正在运行，您的错误在于错误框 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>

尝试使用模糊功能显示 <div> 元素

Attempting to show a <div> element with the blur function

jquery

hide

show

blur