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();

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

1 个答案: