觸發類似的JQuery元素在不同的跨度元素上

Question

所以我想要發生的是理想情況是觸發一個相同的函數，我已經在我的電子郵件span/form元素中，但是我是JQuery的新手，不能完全包裹我的圍着它轉。無論如何，所以在我的電子郵件功能，它基本上抓住用戶輸入，並觸發css類「形式跨度錯誤」，這將span元素變成紅色。在用戶輸入「@」符號之前，會觸發「表單跨度有效」。我還想讓JQuery在productId論壇/ 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"); 
      });