使用相同的类更改多个元素的src

Question

我有多个iframe，每个iframe都有自己的src属性;

<iframe src="test1.html"></iframe>
<iframe src="test2.html"></iframe>

它特别是一个灯箱;在iframe内部，我有其他页面的链接。当您关闭灯箱并重新打开灯箱时，iframe将保留您在该iframe中访问的最后一页（不是原始的src）;

然后我使用该代码将iframe返回到其原始的src

$(".lightboxOverlay").click(function(e) {
  //bla bla bla
  $("#lightboxID iframe").attr("src", $("#lightboxID iframe").attr("src"));
});

当你只使用一个iframe时，它可以工作，但如果你有多个灯箱，每个灯箱都有不同的iframe，并使用上面的代码，那么所有的iframe都会得到相同的src;

正如我之前所说，当我关闭灯箱时，我需要将iframe返回到原来的src。

你能帮助我吗？

真正的代码是这样的：

<div class="lightbox" id="lb1">
    <iframe src="page1.html"></iframe>
</div> 
<div class="lightbox" id="lb2">
    <iframe src="page2.html"></iframe>
</div>

可能解决方案

好吧，我的问题得到了一个微弱的解决方案。当灯箱打开时，我向iframe容器添加了一个active类。然后，当灯箱关闭时，脚本使用“.active iframe”选择器。

$(".lightboxOverlay").click(function(e) {
  //bla bla bla
  $(".active iframe").attr("src", $(".active iframe").attr("src"));
  $(".active").removeClass("active");
});

我知道，这是一个微弱的解决方案，但如果你有更好的方法来解决问题，你可以自由地回答这个问题。

Answer 1

好吧，我的问题得到了一个微弱的解决方案。当灯箱打开时，我向iframe容器添加了一个“.active”类。然后，当灯箱关闭时，脚本使用“.active iframe”选择器。

$(".lightboxOverlay").click(function(e) {
  //bla bla bla
  $(".active iframe").attr("src", $(".active iframe").attr("src"));
  $(".active").removeClass("active");
});

我知道，这是一个微弱的解决方案，但如果你有更好的方法来解决问题，你可以自由地回答这个问题。

Answer 2

您的代码无法区分帧，这就是两个帧都得到更新的原因。尝试使用唯一ID调用它们或循环可用帧。

var iframes = [...document.getElementsByTagName('iframe')];

$(".lightboxOverlay").click(function(e) {
iframes.forEach(function(element) {
  console.log(element);
  /* Your code here and use `element` instead of `$('iframe')` and this will loop through the available frames */
});
});

<iframe src="test1.html"></iframe>
<iframe src="test2.html"></iframe>