个人中心
gpt4 book ai didi

javascript - 单击单独的 Div 时显示隐藏的 Iframe

转载 作者：行者123 更新时间：2023-12-03 06:52:05 26 4
gpt4 key购买 nike

目前我的网站加载后如下所示: enter image description here

描述通过 css 悬停时显示。我在 iframe 中加载了每个联合办公空间的网站，这些网站对于每个联合办公空间框都是隐藏的。我的代码当前可以在单击描述时显示所有网站，并在按下 X 按钮时隐藏。

由于某种原因，当我尝试使用点击 ID 时，无论我单击哪个框，它都只会打开第一个联合办公网站框。这就是所发生的一切。这些网站都是隐藏的 iframe。

enter image description here

如何通过点击 id 选择一个框并显示相应的网站 iframe？我认为我遇到的问题是所有这些框都是通过单个 for 循环生成的。想法和建议？

这是我的代码:

<?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>

最佳答案 

    <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>

这应该可以解决你的问题。您的代码仅打开第一个联合办公网站框的原因是您没有指定您希望通过点击影响哪个联合办公网站框。

上面的代码使用 this 来引用用户单击的内容，然后您可以告诉 JavaScript 显示或隐藏与用户单击的描述相关联的 iframe。

关于javascript - 单击单独的 Div 时显示隐藏的 Iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37449760/

26 4 0
文章推荐： javascript - 尝试循环 Progressbar.js 动画
文章推荐： javascript - 如何使用Google Maps API——Meteor
文章推荐： javascript - 将 js 代码从 Jade 转换为 EJS
文章推荐： javascript - 计算浏览器滚动条的大小
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com