表单元素在选定选项上使用jQuery淡出

Question

当在表单中选择某个选项时，我有这段JavaScript代码可以淡出元素，这是我的代码：

    <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中，它们会立即消失。

当我在网站上使用bootstrap 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>

Answer 1

正如@ 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();