Создание невидимого элемента на конкретном входе

Что я хочу сделать, так это просто сделать div с id = «одним» невидимым при вводе «1» в поле ввода и, соответственно, одинаковым для div с id = «2» и id = «3» для ввода «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>

источник

2016-08-03 R K

просто удалите 'var' в строке' if (var x == 1) {' –

Вы можете использовать' document.getElementById («один»). 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 только как алфавит или буквенно-цифровую форму, мой тренер не допустил –

$("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

Создание невидимого элемента на конкретном входе

ответ

Смежные вопросы