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

Question

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

我的功能正在运行，但我想加载一个特定的 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>

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

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

请帮助我社区。

Answer 1

您必须限制代码范围以更新正确的 iframe 元素而不是所有元素。你可以这样做：

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

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

Jquery: How to load a specific iframe from multiple iframes with same class name

html

javascript

iframe

jquery