表單元素使用jQuery淡出對所選的選項

我有這樣的JavaScript代碼，當表單中選擇某個選項，淡出元素，這裏是我的代碼：表單元素使用jQuery淡出對所選的選項

<script type="text/javascript"> 
    function opt_onchange() { 
     if (document.getElementById("opt").value == "banscan") { 
      document.getElementById("form_username").style.visibility = "hidden"; 
      document.getElementById("form_password").style.visibility = "hidden"; 
     } else { 
      document.getElementById("form_username").style.visibility = "visible"; 
      document.getElementById("form_password").style.visibility = "visible"; 
     } 

     if (document.getElementById("opt").value == "") { 
      document.getElementById("submit").style.visibility = "hidden"; 
     } else { 
      document.getElementById("submit").style.visibility = "visible"; 
     } 
    } 
</script>

當選擇了該選項banscan，前2個字段的用戶名和密碼淡出。但在Javascript中，它們即刻淡出。

因爲我在網站上使用引導程序3，我以爲我應該嘗試jQuery，因爲它已經可用。我已經閱讀了一些jQuery教程，但我找不到任何特定於我需要的東西。這是我的嘗試：

<script type="text/javascript"> 
    function opt_onchange() { 

     if (document.getElementById("opt").value == "") { 
      document.getElementById("submit").style.visibility = "hidden"; 
     } else { 
      document.getElementById("submit").style.visibility = "visible"; 
     } 

     if (document.getElementById("opt").value == "banscan") { 
      $("form_username").fadeOut(); 
      $("form_password").fadeOut(); 
     } else { 
      $("form_username").fadeIn(); 
      $("form_password").fadeIn(); 
     } 
    } 
</script>

但是，此代碼根本不起作用。

編輯：

這裏是我更新的代碼，現在我只是需要做出提交按鈕淡出頁面加載。

<script type="text/javascript"> 
      $(document).ready(function() { 
       $("#submit").fadeOut(); 
      }); 

      function opt_onchange() { 
       if (document.getElementById("opt").value == "") { 
        $("#submit").fadeOut(); 
       } else { 
        $("#submit").fadeIn(); 
       } 

       if (document.getElementById("opt").value == "banscan") { 
        $("#form_username").fadeOut(); 
        $("#form_password").fadeOut(); 
       } else { 
        $("#form_username").fadeIn(); 
        $("#form_password").fadeIn(); 
       } 
      } 
     </script>

來源

2014-01-26 FortuneCookie101

您忘記了選擇器中的「＃」，例如， '$（'＃form_username'）' – lifetimes

啊，是的，我現在加了他們。 – FortuneCookie101

正如@ user3237539指出的那樣，您的jQuery選擇器必須以'＃'開頭。你的代碼應該是這樣的：

<script type="text/javascript"> 
function opt_onchange() { 

    if (document.getElementById("opt").value == "") { 
     document.getElementById("submit").style.visibility = "hidden"; 
    } else { 
     document.getElementById("submit").style.visibility = "visible"; 
    } 

    if (document.getElementById("opt").value == "banscan") { 
     $("#form_username").fadeOut(); 
     $("#form_password").fadeOut(); 
    } else { 
     $("#form_username").fadeIn(); 
     $("#form_password").fadeIn(); 
    } 
} 
</script>

希望有幫助！ PS：當你使用document.getElementById()時，你可以使用$("#id")來使用更多jQuery的有用函數。您可以將document.getElementById("submit").style.visibility = "hidden"; 與$("#submit).hide();

來源

2014-01-26 23:11:03 Jlennon321

謝謝你，你幫了我很多:) – FortuneCookie101

沒問題！樂於幫助。 – Jlennon321

表單元素使用jQuery淡出對所選的選項

回答

相關問題