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..."

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

Answer 2

＆＃13;

var els = document.querySelectorAll('.ow_chat_dialog > button');
function handler () {
  this.previousElementSibling.src = "//stackoverflow.com";
}
for (var i=0; i<els.length; ++i)
  els[i].addEventListener('click', handler);

＆＃13;

<div class="ow_chat_dialog">
  <iframe id="myframe"></iframe>
  <button></button>
</div>
<div class="ow_chat_dialog">
  <iframe id="myframe"></iframe>
  <button></button>
</div>
<div class="ow_chat_dialog">
  <iframe id="myframe"></iframe>
  <button></button>
</div>

＆＃13;

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

2 个答案: