Javascript："if" 表单获取的值为 "on"

Question

我无法正确运行此脚本。

我正在尝试使表单输入的值显示或隐藏操作页面上的不同部分。

例如，下面的 html 代码显示所有 header 文本开始时都是隐藏的，但是 javascript 函数应该根据表单的 GET 值取消隐藏该部分。

因此，要显示 "custom" 部分，link 将是 http://domain.tld/action.php?custom=on

以下是需要根据表单值显示/隐藏的部分。

<div id="customsection" onload="javascript:customCheck();" style="display:none" class="custom">
    <h1>Custom Text</h1>
</div>

<div id="whitesection" onload="javascript:whiteCheck();"  style="display:none" class="white">
    <h1>White Text</h1>
</div>

<div id="colorsection" onload="javascript:colorCheck();"  style="display:none" class="color">
    <h1>Colored Text</h1>
</div>

这是我的脚本函数：

function customCheck() {
    if ($_GET['custom'] == 'on') {
        document.getElementById('customsection').style.display = 'block';
    }
    else document.getElementById('customsection').style.display = 'none';

}
function colorCheck() {
    if ($_GET['color'] == 'on') {
        document.getElementById('colorsection').style.display = 'block';
    }
    else document.getElementById('colorsection').style.display = 'none';

}
function whiteCheck() {
    if ($_GET['white'] == 'on') {
        document.getElementById('whitesection').style.display = 'block';
    }
    else document.getElementById('whitesection').style.display = 'none';

}

脚本有什么问题/我该如何解决？

提前致谢！

Answer 1

** 将其放在页面的 head 标签中，以便在加载 html 后它会运行 **

您可能需要查看 isset() php 函数，以便检查是否设置了 $_GET

<script>
    $(document).ready(function(){

        // --------------------------------------------------------
        // Just for convienience, set the gets as javascript variables 
        // so the bottom functions are cleaner
        // --------------------------------------------------------

        var custom = "<?php echo $_GET['custom']; ?>";
        var color = "<?php echo $_GET['color']; ?>";
        var white = "<?php echo $_GET['white']; ?>";

        // --------------------------------------------------------
        // On document load run these 3 functions
        // --------------------------------------------------------

        customCheck();
        colorCheck();
        whiteCheck();

        // --------------------------------------------------------
        // Create functions
        // --------------------------------------------------------
        function customCheck() {
            if (custom == 'on') {

                document.getElementById('customsection').style.display = 'block';
            }   else {
                document.getElementById('customsection').style.display = 'none';
            }
        }

        function colorCheck() {
            if (color == 'on') {
            document.getElementById('colorsection').style.display = 'block';
            } else {
                document.getElementById('colorsection').style.display = 'none';
            }
        }

        function whiteCheck() {
            if (white == 'on') {
                document.getElementById('whitesection').style.display = 'block';
            } else {
                document.getElementById('whitesection').style.display = 'none';
            }
        }

        // --------------------------------------------------------

    });
</script>

你的 HTML 在你的 body 范围内的任何地方。

<div id="customsection" style="display:none" class="custom">
    <h1>Custom Text</h1>
</div>

<div id="whitesection" style="display:none" class="white">
    <h1>White Text</h1>
</div>

<div id="colorsection" style="display:none" class="color">
    <h1>Colored Text</h1>
</div>

Javascript："if" 表单获取的值为 "on"

Javascript: "if" form get value is "on"

javascript

forms

if-statement

get

display