[英]How to get the child element from event.target.parentElement by id name
[英]How to get an element from event target closest(name)
我不确定如何使用事件目标closest([name="..."])
据我了解closest()
应该在我更改输入字段中的值进行计算后获取元素,但我得到的元素是null
function calculate(e) { if (e.target.name == 'qty') { var elemPrice = e.target.closest('[name="price"]') //*** var elemAmount = e.target.closest('[name="amount"]') //*** console.log(elemPrice) console.log(elemAmount) elemAmount.value = elemPrice.value * e.target.value } } document.addEventListener('DOMContentLoaded',function(){ document.getElementsByName('qty').forEach(t => { t.addEventListener('change',calculate) }) })
<table> <tbody> <tr class="uk-hidden"> <td>1</td> <td><input name="price"></td> <td><input name="qty"></td> <td><input name="amount"></td> </tr> <tr class="uk-hidden"> <td>2</td> <td><input name="price"></td> <td><input name="qty"></td> <td><input name="amount"></td> </tr> <tr class="uk-hidden"> <td>3</td> <td><input name="price"></td> <td><input name="qty"></td> <td><input name="amount"></td> </tr> </tbody> </table>
我试过了
...
var elemPrice = e.target.parentElement.previousElementSibling.lastElementChild //***
var elemAmount = e.target.parentElement.nextElementSibling.lastElementChild //***
...
但我想做closest
的事情有没有办法做到这一点?
无论如何提前谢谢你
阅读文档总是一个好主意。 如果我们查看https://developer.mozilla.org/en-US/docs/Web/API/Element/closest ,它会说:
最近的()方法遍历
Element
及其父元素(朝向文档根),直到找到与提供的选择器字符串匹配的节点。 将返回自身或匹配的祖先。 如果不存在这样的元素,则返回null
。
所以它不会做你假设的事情:它只检查从你的元素到文档根的路径。 您想要的是找到最接近的<tr>
,然后在该元素中找到name=price
元素:
e.target.closest(`tr`).querySelector(`[name=price]`)
不要忘记,对于 TypeScript,您必须明确说明元素target
的类型。
highlight($event: Event) {
let tar = $event?.target as HTMLElement; // HTMLInputElement etc
console.log(tar);
// now TS allows access to expected HTMLElement methods like .closest
console.log(tar.closest('div'));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.