Question

下午好，我在网站上使用了两个按钮，每个按钮都打开一个不同的iframe。问题在于，单击打开一个后，单击另一个iframe按钮时另一个不能同时打开。

$(function() {
  $('#load').click(function() {
    if (!$('#iframe').length) {
      $('#iframeHolder').html('<iframe id="iframe" scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
    }
  });
});


$(function() {
  $('#load2').click(function() {
    if (!$('#iframe').length) {
      $('#iframeHolder2').html('<iframe id="iframe" scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
    }
  });
});

<center>
  <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a>&nbsp;
  <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
</center>
<br>
<br>
<br>
<div id="iframeHolder"></div>
<br>
<br>
<div id="iframeHolder2"></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

Answer 1

因为这正是if(!$('#iframe').length)在两个按钮中都阻止的操作。当您将新HTML附加到页面时，它包含带有id="iframe"的元素。因此，下次运行该if语句时，.length大于0，因此检查为false，并且if块不会执行。

如果没有if，则可以同时打开两个文件：

$(function(){
    $('#load').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
    });   
});
        
        
$(function(){
    $('#load2').click(function(){ 
        $('#iframeHolder2').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
    });   
});

<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a>&nbsp;<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
<br>
<br>
<br>
<div id="iframeHolder"></div>  
<br>
<br>
<div id="iframeHolder2"></div>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

注意：我也从附加的HTML中删除了id="iframe"，因为您不想在两个元素之间添加相同的{{1} }到页面。如果您需要这些元素具有ID，则它们必须是唯一的。

另一方面，

如果，您希望能够在两者之间进行切换，那么您希望将它们放在一个容器中，而不是放在一个容器中容器：

id

$(function(){
    $('#load').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
    });   
});
        
        
$(function(){
    $('#load2').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
    });   
});

还要注意，使用2个<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a> <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a> <br> <br> <br> <div id="iframeHolder"></div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>处理程序是多余的。每个点击处理程序都不需要那么多的仪式，只需将它们都创建即可：

document.ready

JavaScript-两个按钮分别打开2个iframe

1 个答案: