javascript - две кнопки для открытия 2 фреймов соответственно

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>

Примечание: I также удалил id="iframe" из добавленного HTML, поскольку вы не хотите добавлять два элемента с одинаковым 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>');
    });   
});