javascript - 在不同的span元素上触发类似的JQuery元素

Question

所以理想情况下，我想要发生的是触发我的电子邮件范围/表单元素中已有的相同功能，但是我对 JQuery 很陌生，无法完全理解它。无论如何，在我的电子邮件功能中，它本质上是获取用户输入并触发 css 类“表单跨度错误”，从而将跨度元素变为红色。直到用户输入“@”符号，才会触发“表单跨度有效”。我还希望 JQuery 触发 ProductId forum/span 元素上的“form span.error”规则。请有人解释一下吗？ 以下是跨度的 CSS 规则:

#form span {
    border-radius: 20px;
    margin-left:15px;
    padding: 8px 35px;
    background: #FA5700;
    color:#faf3bc;
}
#form span.valid {
    background-color :#c0ce51;
    color: #faf3bc;
}
#form span.error {
    background-color:#b0240f;
    color: #faf3bc;
}

HTML/JQUERY:

   <form method="post" action="contact-thanks.php">

                    <p>
                            <label for="name">Name:</label>
                            <input type="text" name="name" id="name" class="required" value="<?php if (isset($name)) { echo htmlspecialchars($name); } ?>">
                            <span>Please enter your name</span>
                    </p>

                    <p>
                            <label for="email">Email:</label>
                            <input type="text" name="email" id="email" class="required" value="<?php if(isset($email)) { echo htmlspecialchars($email); } ?>">
                            <span>Please enter a valid email address</span>
                    </p>

                    <p> 
                            <label for="productId">Product Id:</label>
                            <input type="text" name="productId" id="productId" class="required" value="<?php if(isset($productId)) { echo htmlspecialchars($productId); } ?>">
                            <span>Please enter a ID number</span>
                    </p>
               <p class="submit">
                    <input type="submit" value="Submit" class="btn-submit">
                </p>
            </form>

</div>
<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        var $submit = $(".submit input");
        var $required = $(".required");
        function containsBlanks(){
            var blanks = $required.map(function(){ return $(this).val() == "";});
            return $.inArray(true, blanks) != -1;
        }
        //Checks for valid email
        function isValidEmail(email){
            return email.indexOf("@") != -1;
        }
        //Does not let the user submit if all text fields are not filled in
        function requiredFilledIn(){
            if(containsBlanks() || !isValidEmail($("#email").val())) 
                $submit.attr("disabled","disabled");
            else 
                $submit.removeAttr("disabled");
        }

        //Here's what I've tried, I'm playing around with it here for testing purposes
        //I'm afraid this syntax is terribly wrong  
        $("#productId").focus(function(){

            $(this).next().removeClass("valid").addClass("error");
        });
        $("#form span").hide();
        $("input,textarea").focus(function(){
            $(this).next().fadeIn("slow");
        }).blur(function(){
            $(this).next().fadeOut("slow");
        }).keyup(function(){
            //Check all required fields.
            requiredFilledIn();
        });

        $("#email").keyup(function(){
            //Check for a valid email.
            if(isValidEmail($(this).val()))
             $(this).next().removeClass("error").addClass("valid");
            else 
             $(this).next().removeClass("valid").addClass("error");
        });




        requiredFilledIn();
    </script>

提前感谢任何帮助!

Answer 1

经过一些简单的实验，我明白了。如果有人好奇的话，这是代码:

$("#productId").show(function(){
                $(this).next().fadeIn("slow").removeClass("valid").addClass("error");
            });