javascript - 表单元素在所选选项上使用 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>

选择禁止扫描选项后，顶部 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();