javascript - 使用javaScript访问父div中的元素？

Question

您好，我想访问所有在 div 中执行的功能!例如:

<div class="ow_chat_dialog" id="main_tab_contact_11">
<iframe id="myframe"></iframe>
<button onclick="sersrc()"></button>
</div>

<div class="ow_chat_dialog" id="main_tab_contact_12">
<iframe id="myframe"></iframe>
<button onclick="sersrc()"></button>
</div>

<div class="ow_chat_dialog" id="main_tab_contact_13">
<iframe id="myframe"></iframe>
<button onclick="sersrc()"></button>
</div>
14
15
16
.
.
....
<script>
function setscr(){
document.findviewbyid("myframe").src="hrl..."
}
</script>

在这段代码中，我可以用一个类名和 ID 创建一些 div...但是当我点击任何按钮时，第一个 iframe 发生变化!如果我只想更改同级 iframe!** 只使用 javaScript，而不是 Jquery。

Answer 1

不要使用 ID，它们必须是唯一的。改用类:

<div class="ow_chat_dialog" class="main_tab_contact_13">
    <iframe class="myframe"></iframe>
    <button onclick="sersrc(this)"></button>
</div>

然后通过传递按钮引用让 sersrc 知道点击了哪个按钮。例如，您可以从那里找到像这样的同级 iframe:

function setscr(obj) {
    obj.parentNode.querySelector(".myframe").src = "hrl..."
}

如果您确定 iframe 将始终紧接在按钮之前，那么您可以简单地做

obj.previousElementSibling.src = "hrl..."

(当然这不太可靠，因为取决于结构)。