Javascript 如何使用JQuery切换函数在单击时显示/隐藏DIV？

我尝试在单击另一个DIV时显示一个DIV。我对JQuery不熟悉，只想使用CSS，但因为我使用PHP在数据库中循环以显示创建的所有DIV，所以我需要使用JQuery单独显示隐藏的DIV。当点击

HTML：当点击桌面框时，将站点信息显示在旁边一点，这样用户就可以不动它了

PHP:

---

jsFIDLE:

您的代码似乎正常工作，在JFIDLE中，只需从框架和扩展中选择jquery，而不必选择任何库

在FIDLE中选择jquery框架以获得一个正常工作的示例，然后在station\u info中添加一个边距，让您始终可以看到桌面框div

#station_info {
    display: none;
    width:150px;
    height:150px;
    margin-left:100px; // <- this
    border:4px solid black;
    background-color:white;
}

---

您会注意到Jquery只影响它找到的第一个桌面框

当您有多个框时，您需要稍微区分它们

<a class="showSingle" target="1">Div 1</a>

<a class="showSingle" target="2">Div 2</a>

<a class="showSingle" target="3">Div 3</a>

<a class="showSingle" target="4">Div 4</a>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

jQuery(function () {
    jQuery('.showSingle').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.targetDiv').eq(index).slideDown();
        jQuery('.targetDiv').not(newTarget).slideUp();

    });
});

查看此JSFIDLE以获取示例：

---

我正在编辑您的代码，以便您更好地理解

CSS:

HTML:

PHP:

检查以了解我正在尝试做什么

---

在创建div时，我尝试在单击div desk\u box和station\u div之间进行一些参考，以进行切换。

您的代码可以工作，您只需要在页面左侧的菜单中包含jQuery：在小提琴上可以，但对我来说不行？我包含在中，该文件与我的PHP文件位于同一目录中。。有什么想法吗？你检查过控制台有没有错误吗？事实上，它只对一个有效，但我正在尝试的是对使用我的PHP创建的每个DIV使用它，而loopElement ID必须是唯一的。用一个类来代替。是的，在小提琴上它是有效的，但对我来说它不是？我包含在中，该文件与我的PHP文件位于同一目录中。。小提琴上有什么理想吗？它有用，但对我来说不行？我包含在中，该文件与我的PHP文件位于同一目录中。。任何想法，嗯，很奇怪。你能和我们分享一个链接吗，页面放在哪里？如果没有额外的信息，很难理解您遇到了什么样的问题。实际上，它只对一个问题有效，但我正在尝试的是对使用PHP while循环创建的每个DIV都有效。您必须对DOM中多次出现的and元素使用类，而不是id。

<?php
include 'db_conn.php';

//query to get X,Y coordinates from DB for the DESKS
$coord_sql = "SELECT coordinate_id, x_coord, y_coord FROM coordinates";
$coord_result = mysqli_query($conn,$coord_sql);

//see if query is good
if($coord_result === false) {
    die(mysqli_error()); 
}
/*************************************/
//query to show workstation/desks information from DB for the DESKS
$station_sql = "SELECT coordinate_id, x_coord, y_coord, section_name FROM coordinates";
$station_result = mysqli_query($conn,$station_sql);

//see if query is good
if($station_result === false) {
    die(mysqli_error()); 
}
?>
<?php
                    //get number of rows for X,Y coords in the table
                    while($row = mysqli_fetch_assoc($coord_result)){    
                        //naming X,Y values
                        $id    = $row['coordinate_id'];
                        $x_pos = $row['x_coord'];
                        $y_pos = $row['y_coord'];

                        //draw a box with a DIV at its X,Y coord     
                        echo "<div id='desk_box' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>id:".$id."</div>";
                } //end while coord_result loop

    while($row = mysqli_fetch_assoc($station_result)){
        $id       = $row['coordinate_id'];
        $x_pos    = $row['x_coord'];
        $y_pos    = $row['y_coord'];
        $sec_name = $row['section_name'];

    echo "<div id='station_info'style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>Hello the id is:".$id."</br>Section:".$sec_name."</br></div>";
                    }
                ?>

#station_info {
    display: none;
    width:150px;
    height:150px;
    margin-left:100px; // <- this
    border:4px solid black;
    background-color:white;
}

<a class="showSingle" target="1">Div 1</a>

<a class="showSingle" target="2">Div 2</a>

<a class="showSingle" target="3">Div 3</a>

<a class="showSingle" target="4">Div 4</a>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

jQuery(function () {
    jQuery('.showSingle').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.targetDiv').eq(index).slideDown();
        jQuery('.targetDiv').not(newTarget).slideUp();

    });
});

/*body*/
 body {
 margin:0px auto;
 width:80%;
 height:80%;
}
/*map size*/
 #map_size {
 width:1190px;
 height:1300px;
 background:#0099FF;
 border-style: solid;
 border-color: black;
 position: relative;
}
/* desk boxes*/
 .desk_box {
 width: 23px;
 height: 10px;
 border: 4px solid black;
 padding:10px;
}
/*station info*/
 .station_info {
 display: none;
 width:150px;
 height:150px;
 border:4px solid black;
 background-color:white;
}

#desk_box:hover ~ .station_info {
display: block;
}

<script type="text/javascript">
            $(document).ready(function () {
              $(".desk_box").click(function () {
                $id = $(this).attr("data")
                $("#station_info_"+$id).toggle();
              });


            });
        </script>

<?php


            //get number of rows for X,Y coords in the table
            while($row = mysqli_fetch_assoc($coord_result)){    
                        //naming X,Y values
                    $id    = $row['coordinate_id'];
                        $x_pos = $row['x_coord'];
                        $y_pos = $row['y_coord'];

                    //draw a box with a DIV at its X,Y coord     
            echo "<div class ='desk_box' data = ".$id."  id='desk_box_".$id."'style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>id:".$id."</div>";
                } //end while coord_result loop

                while($row = mysqli_fetch_assoc($station_result)){
                        $id_cor    = $row['coordinate_id'];
                        $x_pos    = $row['x_coord'];
                        $y_pos    = $row['y_coord'];
                    $sec_name = $row['section_name'];

                    echo "<div id='station_info_".$id_cor."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>Hello the id is:".$id_cor."</br>Section:".$sec_name."</br></div>";
                    }
                ?>