EventListeners使用标签标签获取类

如何解决EventListeners使用标签标签获取类

我有一个事件监听器，如果输入标签的名称与该类相同，则该事件监听器将通过其类名称来捕获元素。它适用于第一个标签，但不适用于第二个标签。我是否使用了错误的事件定位？参见下文。

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>

任何指导都将非常有帮助。

解决方法

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

,

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

所以在您的情况下，

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

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

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

请注意，事件监听器将应用于HTML中出现的所有label。