使div元素在特定輸入上不可見

我想要做的僅僅是在輸入字段的輸入「1」時使id =「one」的div不可見，並且相應地爲div的id =「2」和id輸入「2」=「3」，輸入「3」。使div元素在特定輸入上不可見

我尋找一個簡單而簡單的方法，但也歡迎其他方式。我是網頁設計和開發的初學者。對於任何查詢，請在下面評論。

<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>

來源

2016-08-03 R K

只是刪除行中的'var' if（var x == 1）{' –

您可以使用'document.getElementById（「one」）。style.display =「none」' –

試試這個

<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>

來源

2016-08-03 18:21:46

如果我想給[div id =「one」]，而不是[div id =「1」] –

我爲減少行代碼 –

如果你可以請只使用id作爲字母或字母數字，因爲以id作爲數字我的教練不允許 –

$("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"; 
      } 
});

來源

2016-08-03 18:29:29

使div元素在特定輸入上不可見

回答

相關問題