使用单选按钮组上的数据属性显示文本

Question

我想要的结果是，当用户将键盘焦点发送到单选按钮组并使用箭头键导航到每个单选按钮，或者使用定点设备（鼠标）单击单选按钮时，数据- 该单选按钮的属性值设置为元素 (h2)。

我已经走到这一步了，现在卡住了。我在示例中使用了 ID，但是，我更愿意使用 class 或 data-set="X".

下面的代码设置第一个数据列值而不是第二个。

感谢您的帮助，因为我从 Whosebug 学到了很多东西。我需要在 vanilla JS 而不是 jQuery，抱歉。

<p>
<label for="">The colour is Green
<input type="radio" name="bob" data-col="Green" data-set="Green" id="demo3">
</label>
 <label for="">The colour is Blue
<input type="radio" name="bob" data-col="Blue" data-set="Blue" id="demo3">
</label>
</p>
<h2 id="chjkl"></h2>

document.getElementById('demo3').onclick = function changeClk() {
  const setCol = document.querySelector('#demo3');
  document.getElementById('chjkl').innerHTML = setCol.dataset.col

}
document.getElementById('demo3').onfocus = function changeFoc() {
const setCol = document.querySelector('#demo3');
  document.getElementById('chjkl').innerHTML = setCol.dataset.col
}

Answer 1

使用event.target获取数据集。

在下面的示例中，我更改了 h2 元素背景的颜色。请注意，我将 event 传递给 function 并调用 function 在 eventListener.

此外，我没有使用两个 eventListeners，而是在 radio button 然后使用 querySelectorAll() 查询。然后运行nodeList循环检查event.target当eventListener 被解雇了。

您的代码存在一个问题，即您有多个具有相同 ID 的元素。具有任何唯一 ID 的元素不应超过一个。 ID 只能对一个元素唯一。

let radio = document.querySelectorAll('.radio')
let target = document.getElementById('chjkl')

function changeColor(e) {
  target.style.backgroundColor = e.target.dataset.col
  target.textContent = e.target.dataset.col
}

radio.forEach(btn => {
  btn.addEventListener('focus', changeColor)
})

#chjkl {
  display: flex;
  justify-content: center;
  letter-spacing: 1.3rem;
}

<p>
  <label for="">The colour is Green
<input type="radio" name="bob" data-col="Green" class="radio">
</label>
  <label for="">The colour is Red
<input type="radio" name="bob" data-col="Red" class="radio">
</label>
  <label for="">The colour is Blue
<input type="radio" name="bob" data-col="Blue" class="radio">
</label>
  <label for="">The colour is Orange
<input type="radio" name="bob" data-col="Orange" class="radio">
</label>
</p>
<h2 id="chjkl"></h2>

使用单选按钮组上的数据属性显示文本

Using data attribute on radio button group to show text

html

javascript

attributes

input

radio