jquery - 尝试使用模糊功能显示 元素

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>