带标签标签的EventListeners获取类

Question

我有一个事件侦听器，它通过元素的类名获取元素，如果输入标记名与该类相同的话。它适用于第一个标签，但不适用于第二个标签。我是不是错误地使用了事件目标？见下文。

JS

let selected = true;
document.querySelector('label').addEventListener("click", function(e) {
  if (e.target.checked = selected) {
    let labelFor = document.querySelector('label').htmlFor;
    let inputId = document.getElementById(labelFor);
    let inputName = inputId.name;
    let path = document.getElementsByClassName(inputName)
    console.log(path);
  }
})

HTML

Formatted HTML:
<input type="radio" name="first" id="floor-1">
<label for="floor-1">first</label><br>
<input type="radio" name="second" id="floor-2">
<label for="floor-2">second</label>
<svg viewBox="0 0 300 300">
   <g class="first">
      <path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
   </g>
   <g class="second">
      <path d="M 20 20 H 100 V 100 H 20 L 20 20" />
   </g>
</svg>

任何指导都是非常有帮助的。

Answer 1

​

// since the handler is going to be associated
// with more than one html element, provide it
// as separate function which reduces overhead.
function handleControlStateChange(evt) {

  const elmControl = evt.currentTarget;
  const svgRoot = document.body.querySelector('svg');

  if (svgRoot && elmControl && elmControl.checked) {

    const pathContainer = svgRoot.getElementsByClassName(elmControl.name)[0];

    const elmPath = pathContainer && pathContainer.children[0];
    const pathValue = elmPath && elmPath.getAttribute('d');

    console.log(pathValue);
  }
}

// initialize event listeners, but for the
// "change" event of each checkbox control.
document.body.querySelectorAll('[type="checkbox"]').forEach(elm =>
  elm.addEventListener("change", handleControlStateChange)
);

<label>
  <!--
    provide a simpler stucture and thus, reduced html overhead as with
    `for` and `id` attributes, as well as with the code which handles
    the state changes of a checkbox-control.
  //-->
  <span class="label">first</span>
  <!--
    make use of a checkbox- instead of a radio-control since differently
    named radio-controls do not make sense because there will be no radio-
    group that contains both controls; thus each radio could not be unchecked.
  /-->
  <input type="checkbox" name="first"/>
</label>

<label>
  <span class="label">second</span>
  <input type="checkbox" name="second"/>
</label>

<svg viewBox="0 0 300 300">
  <g class="first"> 
    <path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
  </g>
  <g class="second"> 
    <path d="M 20 20 H 100 V 100 H 20 L 20 20"/>
  </g>
</svg>

​

Answer 2

这是意料之中的，因为document.querySelector('<CSS selector>')返回文档中与指定<CSS selector>匹配的第一个元素。

所以在你的情况下，

• 它遇到#floor-1输入字段的标签
• ，然后将事件侦听器单独附加到该字段。

如果您需要监听文件中的所有标签，请使用

document.querySelectorAll('label').forEach(eachLabelElem => 
   eachLabelElem.addEventListener("click",<your function logic here>)
)

请注意，事件侦听器将应用于HTML中存在的所有label。