Question

目前我的网站在加载时看起来像这样：

说明显示悬停在css上。我有每个联合空间的网站加载在iframe中，每个联合空间框都隐藏了这些网站。我的代码目前用于在单击描述时显示所有站点，并在按下X按钮时隐藏。

出于某种原因，当我尝试使用点击ID时，无论我点击什么框，它都只打开第一个联合站点框。以下是向所有人展示的内容。这些网站都是隐藏的iframe。

如何在点击时按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>

Answer 1

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

单击Divrate Div显示隐藏的iframe

1 个答案: