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

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 block 不执行。

如果没有 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"，因为您不想附加两个元素与页面具有相同的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>');
    });   
});

<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>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

<小时/>

另请注意，使用 2 个 document.ready 处理程序是多余的。您不需要为每个点击处理程序进行那么多仪式，只需创建它们即可:

$(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>');
    });   

    $('#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>');
    });   
});