gpt4 book ai didi

javascript - 无法通过 JQuery 在 JavaScript 中的 onChange 事件上获取元素 ID

转载 作者:行者123 更新时间:2023-11-27 22:54:47 24 4
gpt4 key购买 nike

我有一个小的 HTML 页面,它暴露了我的问题。我想获取输入元素的第一个祖先的 ID (#input-1)。当用户更改选项值时,JavaScript 代码应获取 #li-1 元素的 ID 并显示它。不幸的是,我得到的只是一个undefined,我不知道为什么。

parents() 函数应该遍历 DOM 树并找到 li 元素,然后通过 .attr() 获取 id > 功能

$("#input-1").on("change", function(elem) {
var id = $(elem).parents("li").attr("id");
alert(id);
})
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<li id="li-1">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Test</div>
<div class="item-input-wrap">
<select id="input-1">
<option value="0">test0</option>
<option value="1">test1</option>
</select>
</div>
</div>
</div>
</li>
</body>
</html>

最佳答案

你必须使用.closest()

$("#input-1").on("change", function(){
var id = $(this).closest("li").attr("id");
alert(id);
})

此外,在这种情况下不需要使用elem,只需在$(this)中使用this即可

演示

$("#input-1").on("change", function(elem) {
console.log($(elem.target).closest("li").attr("id"))
var id = $(this).closest("li").attr("id");
alert(id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="li-1">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Test</div>
<div class="item-input-wrap">
<select id="input-1">
<option value="0">test0</option>
<option value="1">test1</option>
</select>
</div>
</div>
</div>
</li>

关于javascript - 无法通过 JQuery 在 JavaScript 中的 onChange 事件上获取元素 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56834591/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com