英文:
Display text in the closest element with certain class
问题
我正在尝试在具有 .msg 类的最接近元素中显示文本，但它始终显示在具有 .msg 类的第一个元素中。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let btn = document.querySelectorAll('button');
btn.forEach(function(i) {
i.addEventListener('click', function() {
let x = document.querySelector('.msg').innerHTML = i.innerHTML;
let z = x.closest(".msg");
});
});
<!-- language: lang-html -->
<div>
<button class="btn">按钮1</button>
<p class="msg"></p>
</div>
<div>
<button class="btn">按钮2</button>
<p class="msg"></p>
</div>
<div>
<button class="btn">按钮3</button>
<p class="msg"></p>
</div>
<!-- end snippet -->
如果我点击按钮1，文本应该显示在按钮1下方，如果我点击按钮2，文本应该显示在按钮2下方，依此类推...
英文:
I'm trying to display a text in the closest element with the .msg class, but it always displayed in the first element with .msg class.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let btn = document.querySelectorAll('button');
btn.forEach(function(i) {
i.addEventListener('click', function() {
let x = document.querySelector('.msg').innerHTML = i.innerHTML;
let z = x.closest(".msg");
});
});
<!-- language: lang-html -->
<div>
<button class="btn">button 1</button>
<p class="msg"></p>
</div>
<div>
<button class="btn">button 2</button>
<p class="msg"></p>
</div>
<div>
<button class="btn">button 3</button>
<p class="msg"></p>
</div>
<!-- end snippet -->
If I click Button1, the text should be displayed underneath Button1, if I click Button2 text should be displayed underneath Button2, and so on...
答案1
得分: 1
closest
> Element 接口的 closest() 方法遍历元素及其父元素（朝向文档根部），直到找到与指定的 CSS 选择器匹配的节点。
.msg 元素位于 button 旁边，而不是在其父元素之一，因此您可以获取按钮的父元素，即 div，然后在其中使用 querySelector 来获取 .msg 元素。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let btn = document.querySelectorAll('button');
btn.forEach(function(i) {
i.addEventListener('click', function() {
const parentDiv = i.parentElement;
parentDiv.querySelector('.msg').innerHTML = i.innerHTML;
});
});
<!-- language: lang-html -->
<div>
<button class="btn">button 1</button>
<p class="msg"></p>
</div>
<div>
<button class="btn">button 2</button>
<p class="msg"></p>
</div>
<div>
<button class="btn">button 3</button>
<p class="msg"></p>
</div>
<!-- end snippet -->
英文:
closest
>The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.
The .msg element is next to the button not on of its parents, so you can get the parent element of the button which is the div, and then use querySelector into it to get the .msg element.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let btn = document.querySelectorAll('button');
btn.forEach(function(i) {
i.addEventListener('click', function() {
const parentDiv = i.parentElement;
parentDiv.querySelector('.msg').innerHTML = i.innerHTML;
});
});
<!-- language: lang-html -->
<div>
<button class="btn">button 1</button>
<p class="msg"></p>
</div>
<div>
<button class="btn">button 2</button>
<p class="msg"></p>
</div>
<div>
<button class="btn">button 3</button>
<p class="msg"></p>
</div>
<!-- end snippet -->
答案2
得分: -1
请尝试以下代码：
<script>
let btn = document.querySelectorAll('button')
btn.forEach(function (i, index) {
i.addEventListener('click', function () {
document.querySelectorAll('.msg')[index].innerHTML = i.innerHTML
})
})
</script>
英文:
Try this
<script>
let btn = document.querySelectorAll('button')
btn.forEach(function (i, index) {
i.addEventListener('click', function () {
document.querySelectorAll('.msg')[index].innerHTML = i.innerHTML
})
})
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论