Question

我有一个div，我将其称为quote_div，并且是parentElement。它包含两个input type="number"元素，一个<label>元素，我称之为r_lbl（变量名），另一个<label>元素，称为r_position（因此，一个div中有四个元素）。

我在div上放置了一个事件侦听器，以便在input type="number"元素中的任何一个更改时，我都可以执行计算。

quote_div.addEventListener("change", calculateCost);

现在，我正在尝试使用事件触发器e（已解析为calculateCost（e）函数）访问div上的r_position元素，但是我收到一个未定义的错误，这很奇怪，因为我已经为r_position定义了值

console.log("li element position: " + e.target.parentElement.r_position.value);

是否可以通过这种方式进行操作？如果是这样，我不了解什么？

Answer 1

根据您的HTML结构，您可以使用NonDocumentTypeChildNode.previousElementSibling或NonDocumentTypeChildNode.nextElementSibling：

const div = document.getElementById('quote_div');

div.addEventListener('change', (e) => {
  const target = e.target;  
  const label = target.previousElementSibling;
  
  console.log(label.innerText);
});

<div id="quote_div">
  <label class="r_lbl" for="input1">Label 1</label>
  <input id="input1" type="number" />
  
  <label class="r_position" for="input2">Label 2</label>
  <input id="input2" type="number" />
</div>

否则，您可以使用<div>，id，class或任何其他选择器使用父name的{{3}}：

const div = document.getElementById('quote_div');

div.addEventListener('change', (e) => {
  const div = e.target.parentElement;  
  const label1 = div.querySelector('.r_lbl');
  const label2 = div.querySelector('.r_position');
  
  console.log(label1.innerText, label2.innerText);
});

<div id="quote_div">
  <label class="r_lbl" for="input1">Label 1</label>
  <input id="input1" type="number" />
  
  <label class="r_position" for="input2">Label 2</label>
  <input id="input2" type="number" />
</div>

通过事件访问parentElement属性

1 个答案: