通过事件访问父元素属性

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或任何其他选择器使用父Element.querySelector()：

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>