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

Question

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

我的 function 正在工作，但我想加载一个特定的 iframe，我点击它加载所有 iframe。

这是我的片段。

Html（按钮列表）

  <div id="mydiv">
         <iframe class="frame"  width="100%" height="300">
         </iframe>
  </div>
     <button class="button">Load</button>


  <div id="mydiv">
        <iframe class="frame"  width="100%" height="300">
        </iframe>
  </div>
    <button class="button">Load</button>

Css（隐藏我的 iframe）

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

脚本（点击运行以加载和显示 iframe 的 jquery 功能）

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

请帮助我社区。

Answer 1

您必须 scope 代码来更新正确的 iframe 元素而不是全部。 您可以执行以下操作：

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