Показать скрытые Iframe на Щелк раздельного Div

В настоящее время мой сайт выглядит так, когда загружен: Показать скрытые Iframe на Щелк раздельного Div

описание появляется при наведении курсора мыши через CSS. У меня есть веб-сайты для каждого пространства коворкинг, загруженного в iframe, которые скрыты для каждой коворсионной коробки. В настоящее время мой код работает с показом всех сайтов, когда нажимается и скрывается описание при нажатии кнопки X.

По какой-то причине, когда я пытаюсь использовать клик по идентификатору, он открывает только первый сайт сайта коворкинг независимо от того, какую ячейку я нажимаю. Вот что должно показать все. Эти сайты - все скрытые фреймы.

Как выбрать окно по идентификатору на мыши и показать соответствующий веб-сайт IFRAME? Я думаю, что проблема, с которой я сталкиваюсь, - это все эти поля, созданные с помощью одного цикла. Мысли & Предложения?

Вот мой код:

<?php require_once('include/header.php')?> 
<? require('include/navigation.php') ?> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Coworking Spaces</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
     $(".description").click(function() { 
      $(".website").show("slow", function() { 
      // Animation complete. 
      }); 
      $(".hideWebsite").show("slow", function() { 
     }); 
     }); 

     $(".hideWebsite").click(function() { 
      $(".website").hide("slow", function() { 
      }); 
      $(".hideWebsite").hide("slow", function() { 
      }); 
     }); 
     }); 
     </script> 
    </head> 
     <body> 
     <div id="container"> 
      <div id='city_header'> 
       <div id='city_search'> 
        <h1> 
         Kansas City 
        </h1> 
       </div> 
      </div> 
      <div id="body"> 
         <?php 
         for($i = 0; $i < count($cospaces); ++$i){ 
          ?> 

         <div class="company_box" style ="background-image: url(<?php echo($cospaces[$i]['image'])?>);"> 
          <button class= "hideWebsite" type="button" name="button">X</button> 
          <iframe class= "website" src="<?php echo($cospaces[$i]['website']) ?>"></iframe> 
         <div class="name_box"> 
          <h3 class="space_name"><?php echo($cospaces[$i]['name'])?></h3> 
         </div> 
         <div class="description"> 
          <p><?php echo($cospaces[$i]['description']) ?></p> 
         </div> 
       </div> 
       <?php } ?> 
      </div> 
      <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p> 
     </div> 
     </div> 
    </body> 
</html>

источник

2016-05-26 Justin Christian

Самый простой способ - группировать каждую кнопку div и ее iframe с использованием аналогичного класса во время его создания в цикле 'for'. поэтому вы можете получить доступ к iframe из его, пусть мы говорим, кнопки. – SaidbakR

Они все в своем собственном «company_box» div, который, как вы говорите, я считаю. Как я мог бы получить к нему доступ? –

<script type="text/javascript"> 
     $(document).ready(function(){ 
     $(".description").click(function() { 
      $(this).siblings('.website').show('slow'); 
      $(".hideWebsite").show("slow"); 
     }); 

     $(".hideWebsite").click(function() { 
      $(this).siblings('.website').hide('slow'); 
      $(this).hide("slow"); 
     }); 
     }); 
    </script>

Это должно исправить вас. Причина, по которой ваш код открывал только первый сайт сайта coorking, заключается в том, что вы не указали, с каким кликом вы хотите повлиять.

В приведенном выше коде используется this, чтобы ссылаться на то, что пользователь нажал, и вы можете сообщить JavaScript, чтобы показать или скрыть iframe, связанное с описанием, которое пользователь нажал.

источник

2016-05-26 01:04:22 plinkplink

Большое вам спасибо. Я знал, что мне нужно использовать «Это». Я просто не знал, как и не смог найти правильный тестовый пример. Это сработало отлично. –

Показать скрытые Iframe на Щелк раздельного Div

ответ

Смежные вопросы