Показать div с помощью переключателей - PullRequest
Новая
       31

Показать div с помощью переключателей

0 голосов
/ 01 марта 2019

Чтобы уменьшить количество строк кода, я упростил свой код, чтобы вместо этого отобразить три деления.Я хочу, чтобы отображался конкретный элемент div, скрывая при этом два других элемента div, в зависимости от того, какой переключатель выбран.

Я на самом деле перехожу по этим двум ссылкам

Добавление прослушивателей событийдля нескольких элементов

Как проверить, выбран ли переключатель с помощью JavaScript?

во второй ссылке было предложено использовать 

radios[i].type === 'radio' && radios[i].checked

для теста.

однако я изменил его на 

DisplayOption[i].checked

, так как это все, что я думаю, мне нужно.Я получаю ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'флажок' из неопределенного 

const column = document.querySelector('.column');
const table = document.querySelector('.table');
const details = document.querySelector('.details');

onload = function() {
  const DisplayOption = document.getElementsByClassName("DisplayOption");
  for (i = 0; i < DisplayOption.length; i++) {
    DisplayOption[i].addEventListener('click', function() {
      if (DisplayOption[i].checked) {
        if (displyOption[i].value === "column") {
          column.style.display = "grid";
          table.style.display = "none";
          table.details.style.display = "none";
        } else if (displyOption[i].value === "table") {
          column.style.display = "none";
          table.style.display = "block";
          table.details.style.display = "none";
        } else {
          column.style.display = "none";
          table.style.display = "none";
          table.details.style.display = "block";
        }
      }
    }, false);
  }
}
.column {
  display: grid;
}

.table {
  display: none;
}

.table.details {
  display: none;
}
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">


<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="table details"> The third div is being displayed </div>

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Вы можете достичь того же, используя CSS!Нет необходимости в JavaScript!

Вы можете использовать селектор sibling (~) в CSS и отобразить соответствующий div

div {
  display: none;
}

input[value="column"]:checked~.column,
input[value="table"]:checked~.table,
input[value="details"]:checked~.details {
  display: block;
}
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">


<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="details"> The third div is being displayed </div>

JSFiddle link

0 голосов
/ 01 марта 2019

Внутри eventListener , чтобы ссылаться на элемент, по которому щелкают, используйте this вместо DisplayOption[i].Другая ошибка использовала table.details - это должно быть только details.Смотрите исправленную демонстрацию ниже: 

const column = document.querySelector('.column');
const table = document.querySelector('.table');
const details = document.querySelector('.details');

onload = function() {
  const DisplayOption = document.getElementsByClassName("DisplayOption");
  for (i = 0; i < DisplayOption.length; i++) {
    DisplayOption[i].addEventListener('click', function() {
      if (this.checked) {
        if (this.value === "column") {
          column.style.display = "grid";
          table.style.display = "none";
          details.style.display = "none";
        } else if (this.value === "table") {
          column.style.display = "none";
          table.style.display = "block";
          details.style.display = "none";
        } else {
          column.style.display = "none";
          table.style.display = "none";
          details.style.display = "block";
        }
      }
    }, false);
  }
}
.column {
  display: grid;
}

.table {
  display: none;
}

.table.details {
  display: none;
}
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">


<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="table details"> The third div is being displayed </div>
...