Question

为减少代码行数，我简化了代码以显示三个div。我想要的是显示一个特定的div，同时隐藏其他两个div，具体取决于选中了哪个单选按钮。

我实际上正在关注这两个链接

Adding event listeners to multiple elements

How can I check whether a radio button is selected with JavaScript?

在第二个链接中建议使用

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

进行测试。

但是我将其修改为

DisplayOption[i].checked

因为它是我所需要的。我收到的错误是

未捕获的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>

Answer 1

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

Answer 2

您可以使用CSS实现相同的目标！不需要javascript！

您可以在CSS中使用sibling（〜）选择器并显示相应的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

使用单选按钮显示div

2 个答案: