主页 / 问题 / 1255581
Accepted
Alex
Asked:2022-03-14 10:04:30 +0000 UTC2022-03-14 10:04:30 +0000 UTC

将点击输入的类设置为类与输入的 id 匹配的块

  • 772

如何show在点击输入到其类与输入'a id匹配的块上设置类？

.click1, .click2 {
  display: none;
}
label {
display: block;
}
<label>
  <input id="click1" type="radio" name="group">
  <span>Кликни по мне</span>
</label>
<label>
  <input id="click2" type="radio"  name="group">
  <span>Или по мне</span>
</label>

<div class="click1">Это - Click1</div>
<div class="click2">Это - Click2</div>

javascript

1 个回答

  1. Best Answer

    document.addEventListener('click', fAddClass);

function fAddClass(ev) {
  if (ev.target.tagName.toLowerCase() != 'input') return;
  document.querySelector(`.${ev.target.id}`).classList.add('show');
}
    label { display: block; }
.click1, .click2 { display: none; }
.show { display: block; }
    <label>
  <input id="click1" type="radio" name="group">
  <span>Кликни по мне</span>
</label>
<label>
  <input id="click2" type="radio"  name="group">
  <span>Или по мне</span>
</label>

<div class="click1">Это - Click1</div>
<div class="click2">Это - Click2</div>

    要隐藏已显示的块：

    document.addEventListener('click', fAddClass);

function fAddClass(ev) {
  if (ev.target.tagName.toLowerCase() != 'input') return;
  document.querySelectorAll(`.show`).forEach( el => el.classList.remove('show') );
  document.querySelector(`.${ev.target.id}`).classList.add('show');
}
    label { display: block; }
.click1, .click2 { display: none; }
.show { display: block; }
    <label>
  <input id="click1" type="radio" name="group">
  <span>Кликни по мне</span>
</label>
<label>
  <input id="click2" type="radio"  name="group">
  <span>Или по мне</span>
</label>

<div class="click1">Это - Click1</div>
<div class="click2">Это - Click2</div>

    选择器中的自定义属性：

    document.addEventListener('click', fAddClass);

function fAddClass(ev) {
  if (ev.target.tagName.toLowerCase() != 'input') return;
  document.querySelectorAll(`.show`).forEach( el => el.classList.remove('show') );
  document.querySelector(`[data-select="${ev.target.id}"]`).classList.add('show');
}
    label { display: block; }
.click1, .click2 { display: none; }
.show { display: block; }
    <label>
  <input id="click1" type="radio" name="group">
  <span>Кликни по мне</span>
</label>
<label>
  <input id="click2" type="radio"  name="group">
  <span>Или по мне</span>
</label>

<div data-select="click1" class="click1">Это - Click1</div>
<div data-select="click2" class="click2">Это - Click2</div>

    • 3

相关问题