Question

我想要做的只是在输入字段中输入“1”时使id =“1”的div不可见，对于id =“2”和id =“3”的div，相应地相同“2”，输入“3”。

我寻求简短的方法，但也欢迎其他方式。我是网页设计和开发的初学者。如有任何疑问，请在下面评论。

<head>

    <title>
           sample
    </title>

    <script type="text/javascript">

        function myFunction0()

        {
            var x = document.getElementById("text_1").value;

            if ( x == 1 ){
                document.getElementById("one").style.visibility = "hidden";
            }

            if ( x == 2 ){
                document.getElementById("one").style.visibility = "hidden";
                document.getElementById("two").style.visibility = "hidden";
            }
            if ( x == 3 ){
                document.getElementById("one").style.visibility = "hidden";
                document.getElementById("two").style.visibility = "hidden";
                document.getElementById("three").style.visibility = "hidden";
            }
        }
    </script>
</head>
<body>
    <div style="margin-left: 250px;">
        <form>
            <input id="text_1" name="text1" type="text"/>
            <input id="text_2" name="text2" onclick="myFunction0();" type="submit"/>
        </form>
        <br/>
        <br/>
        <br/>
        <div id="one" style="height:100px; width:200px; border:1px solid black;">
            box 1
        </div>
        <br/>
        <div id="two" style="height:100px; width:200px; border:1px solid black;">
            box 2
        </div>
        <br/>
        <div id="three" style="height:100px; width:200px; border:1px solid black;">
            box 3
        </div>
        <br/>
        <div id="four" style="height:100px; width:200px; border:1px solid black;">
            box 4
        </div>
        <br/>
    </div>
</body>

Answer 1

试试这个

<head>

    <title>
           sample
    </title>

    <script type="text/javascript">

        function myFunction0()
        {
          [ 'one', 'two', 'three','four' ].forEach(function( ide ) {
             document.getElementById( ide ).style.visibility = "visible";
            });
var arr = [ 'one','two','three','four'];
            var x = Number(document.getElementById("text_1").value);
            for(var i=1;i<=x;i++){
              
              document.getElementById(arr[i-1]).style.visibility = "hidden";
            }
            
        }
    </script>
</head>
<body>
    <div style="margin-left: 250px;">
        <form>
            <input id="text_1" name="text1" type="text"/>
            <input id="text_2" name="text2" value="click" onclick="myFunction0()" type="button">
        </form>
        <br/>
        <br/>
        <br/>
        <div id="one" style="height:100px; width:200px; border:1px solid black;">
            box 1
        </div>
        <br/>
        <div id="two" style="height:100px; width:200px; border:1px solid black;">
            box 2
        </div>
        <br/>
        <div id="three" style="height:100px; width:200px; border:1px solid black;">
            box 3
        </div>
        <br/>
        <div id="four" style="height:100px; width:200px; border:1px solid black;">
            box 4
        </div>
        <br/>
    </div>
</body>

Answer 2

   $("body").on("keyup","#text_1",function() {
         var x = $("#text_1").val();
         if ( x == 1 ){
                document.getElementById("one").style.visibility = "hidden";
            }

            if ( x == 2 ){
                document.getElementById("one").style.visibility = "hidden";
                document.getElementById("two").style.visibility = "hidden";
            }
            if ( x == 3 ){
                document.getElementById("one").style.visibility = "hidden";
                document.getElementById("two").style.visibility = "hidden";
                document.getElementById("three").style.visibility = "hidden";
            }
});

使div元素在特定输入上不可见

2 个答案: