условное отображение HTML-форм элементов - PullRequest
Новая
       13

условное отображение HTML-форм элементов

9 голосов
/ 18 октября 2010

Что ж, после одного часа знакомства с javascript я придумал следующий код. Он сделал то, что хотел, хорошо, но потом я хотел чего-то другого, и это не сработало.

Я хотел, чтобы при нажатии на кнопку определенное поле скрывалось, а при нажатии на другое - да, другое тоже скрывалось, НО, разумеется, ему приходилось делать другое шоу, иначе мы ничего не получили бы и цель состояла в том, чтобы представить различные поля в зависимости от того, что пользователь нажал (на переключателе). Таким образом, по-детски я сделал свой код, и это сработало. Но потом мне пришло в голову, что я сначала хотел, чтобы оба поля были скрыты вместо обоих полей, и вот в чем проблема. Я добавил значение 0 к параметру функции, "говоря это", что когда x = 0, тогда видимость = скрыта. Но меня это не слушает !, поэтому часть кода, в которой написано, что x = 1 и 2, работает, а около 0 - нет.

Это такой простой код, который может заставить кого-то улыбнуться, но, черт возьми, он был чист и работал. Кто-нибудь знает, как спрятать поля перед нажатием на кнопки?

Большое спасибо, я удалил некоторые теги HTML 

<html>
    <head>
        <script language="javascript">
            var x = 0;

            function hola(x) {
                if(x == 0) {
                    document.getElementById("cont1").style.visibility="hidden";
                    document.getElementById("cont2").style.visibility="hidden";
                }

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

                if(x == 2)  {
                    document.getElementById("cont1").style.visibility="hidden";
                    document.getElementById("cont2").style.visibility="visible"; 
                }
            }
        </script>
    </head>

    <body>
        <input type="button" onclick="hola(1)" value="hidefield2" id="boton1">
        <div id="cont1">
            <input type="text">
        </div>

        <input type="button" onclick="hola(2)" value="hidefield1" id="boton2">

        <div id="cont2">
            <input type="text">
        </div>
    </body>
<html>

Ответы [ 3 ]

8 голосов
/ 18 октября 2010

Что сработало :
У вас было две кнопки, обе были видны в начале.И одним нажатием одной кнопки вы скрыли элемент div и сделали другой видимым.

Теперь вам нужна ситуация, когда элементы div должны быть сначала скрыты, а затем отображаться при нажатии кнопки.

По умолчанию для всех элементов, для которых явный атрибут visibility не задан, visibility считается visible.

Чтобы сделать кнопку невидимой, необходимо добавить к ней visibility:hidden.

Вы можете сделать это двумя способами:

  1. вкод для div s, сделайте затем "невидимым по умолчанию", добавив style='visibility:hidden'.

  2. Добавить еще одну функцию javascript, которая вызывается при загрузке страницы, и делает оба div невидимыми: 

    function hideBoth()  
{  
   document.getElementById("cont1").style.visibility="hidden";  
   document.getElementById("cont2").style.visibility="hidden" ;   
}

Вызовите егозагрузка вашей страницы: <body onload='hideBoth()'>

3 голосов
/ 18 октября 2010

Эта строка: 

document.getElementById("cont1").style.visibility="hidden";

Добавляет это: 

style="visibility: hidden;"

к этому: 

<div id="cont1">

чтобы это выглядело так: 

<div id="cont1" style="visibility: hidden;">

Вы можете сделать это самостоятельно, просто добавив этот атрибут в свой HTML-тег.

Ах да, и это: 

<div id="cont1">

такой же, как этот: 

<div id="cont1" style="visibility: visible;">
0 голосов
/ 12 ноября 2018

Вы также можете использовать jquery! Вот пример, который в основном берет ввод вашего CSS и делает его видимым или нет: 

function checkPrerequisites() {
  // The 4th line makes objects visible in the for loop.
  // Determines if pre-requisites are met and if so - makes div draggable
  // for new courses 

  for (var i = 0; i < courselist.length; i++) {
    if (prerequisitesMet(i)) {
      $('#' + i.toString()).css("background-color", "lightgreen");
      $('#' + i.toString()).css("visibility", "visible");
      $('#' + i.toString()).draggable();
    }
  }
}
...