Question

我有以下结构：

<a class="anchor-toggle" data-toggleable="100"></a>
<a class="anchor-toggle" data-toggleable="200"></a>

<div class="modal" data-toggleable="100">
    <iframe src="url"></iframe>
</div>
<div class="modal" data-toggleable="200">
    <iframe src="url"></iframe>
</div>

我在加载页面时使用以下jQuery将 src 属性移动到 data-src （以阻止加载iframe内容）：

$('.modal iframe').each(function(){

    var get_src = $(this).attr('src'); // Get src
    $(this).attr('data-src',get_src); // Copy src to data-src
    $(this).removeAttr('src'); // Remove original src

});

以下是我需要实现的目标：

当点击其中一个锚点切换时，我需要找到匹配的模态（通过 data-toggleable 值）并在其上运行以下代码以移动数据-src 返回 src ：

var get_data_src = $(this).attr('data-src'); // Get data-src
$(this).attr('src',get_data_src); // Copy data-src to src
$(this).removeAttr('data-src'); // Remove data-src

这可能吗？我可以使用.merge（）或类似的东西以某种方式基于 data-toggleable 值组合对象吗？

Answer 1

<iframe src="url"></iframe>将从源加载页面。完成页面渲染后将加载Jquery。在许多情况下它很有用。所以加载后删除src是没有意义的。最好的方法是不在html中指定src。请尝试以下示例

$(function(){
  $("a.anchor-toggle").click(function(e){
    e.preventDefault();
    var dataToggleable = $(this).attr("data-toggleable");
    var iFrame = $(".modal[data-toggleable='"+dataToggleable+"']").find("iframe");
    $(iFrame).attr('src', $(iFrame).attr('data-src'));
  });
})

a.anchor-toggle{color: blue; cursor: pointer;}
.modal {display:inline-block;}
.modal iframe{width:200px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <a class="anchor-toggle" data-toggleable="100">1st</a>
    <a class="anchor-toggle" data-toggleable="200">2nd</a>
</div>
<div class="modal" data-toggleable="100">
    <iframe data-src="http://www.stackoverflow.com"></iframe>
</div>
<div class="modal" data-toggleable="200">
    <iframe data-src="http://www.stackoverflow.com"></iframe>
</div>

Answer 2

试试这个

$(".anchor-toggle").click(function(){
    var data_toggleable = $(this).attr('data-toggleable');
    var iframe = $("div[data-toggleable='"+data_toggleable+"']").children('iframe');
    var get_data_src = iframe.attr('data-src'); // Get data-src
    iframe.attr('src',get_data_src); // Copy data-src to src
    iframe.removeAttr('data-src');
})

在元素单击时，在具有匹配属性值的对象上运行代码

2 个答案: