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

Question

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

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

这是我的sn-p。

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>

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

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

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

Answer 1

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

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