Jquery：如何从具有相同类名的多个 iframe 加载特定 iframe

Posted 2023-05-09

【中文标题】Jquery：如何从具有相同类名的多个 iframe 加载特定 iframe

【英文标题】：Jquery: How to load a specific iframe from multiple iframes with same class name

【发布时间】：2021-08-08 07:05:13

【问题描述】：

我有一个简单的 html 页面，当你点击它时它有多个按钮，iframe 将从 jquery 脚本加载。

我的函数正在运行，但我想加载一个特定的 iframe，我点击它加载所有 iframe。

这是我的sn-p。

Html（按钮列表）

  <div id="mydiv">
         <iframe class="frame"   >
         </iframe>
  </div>
     <button class="button">Load</button>


  <div id="mydiv">
        <iframe class="frame"   >
        </iframe>
  </div>
    <button class="button">Load</button>

Css（隐藏我的 iframe）

    <style>
        iframe
            display: none;
        
    </style>

脚本（jquery 函数，在点击时运行以加载和显示 iframe）

    $(".button").click(function () 
    $(".frame").attr("src", "https://www.bing.com/");
    $('iframe').css('display', 'block');
    );

请帮助我的社区。​​p>

【问题讨论】：

你需要一些独特的东西——比如一个 ID ...当然，你的 ID 不是唯一的，所以如果你想编写正确的 HTML，你需要解决这个问题

但是兄弟问题是，如果我使用 id 并且如果有 300 个 iframe，那么我需要编写 300 个函数，它会增加冗余。

我想用一个函数来做这个

不管...非唯一 id 是无效的 HTML

【参考方案1】：

您必须限定代码范围以更新正确的 iframe 元素，而不是全部更新。您可以执行以下操作：

$(".button").click(function () 
    var currentIframe = $(this).prev().find("iframe");
    currentIframe.attr("src", "https://www.bing.com/");
    currentIframe.css('display', 'block');
);

【讨论】：

让我试试吧兄弟

真棒兄弟它的工作。兄弟，我可以使用 id，但我想使用一个函数来处理 100 个 iframe。哥哥爱你真的很感激

兄弟我想在linkedin上加你请把链接发给我。并想加入你的圈子

哦，请问姐姐，我可以给你链接吗？

还有一件事我正在使用锚标签来做同样的事情但是当我点击锚标签时 iframe 没有打开