如何使用JQuery切换功能在单击时显示/隐藏DIV？

Question

我试图在单击另一个DIV时显示DIV。 我是JQuery的新手，并且只想使用CSS，但是由于使用PHP遍历数据库以显示所有创建的DIV，因此我需要使用JQuery单独显示隐藏的DIV。 当点击

HTML：单击desk_box时，将station_info稍微偏向一侧，以便用户可以取消切换

<div id="map_size" align="center">
    <div id='desk_box' style='position:absolute;left:20px;top:60px;'>id:84</div>


    <div id='station_info' style='position:absolute;left:20px;top:60px;'>Hello the id  is:203</br>Section:Section C</br></div>

<script type="text/javascript">
                $(document).ready(
            function(){
            $("#desk_box").click(function () {
            $("#station_info").toggle();
            });
            });
        </script>

</div><!--map size-->

CSS：

/*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;
}

PHP：

<?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>";
                    }
                ?>

JSfiddle： http : //jsfiddle.net/qmeepb36/

Answer 1

您的代码似乎可以正常工作，在jfiddle中，只需从“ Frameworks＆Extensions”中选择，jQuery则没有库

Answer 2

在Fiddle中选择jQuery框架以有一个可行的示例，然后在#station_info中添加一个边距，使您始终可以看到#desk_box div。

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

http://jsfiddle.net/qmeepb36/3/

Answer 3

您会注意到，您的Jquery仅影响它找到的第一个#desk_box。

如果有多个框，则需要对它们进行一些区分。

<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();

    });
});

查看此JSFiddle示例： http : //jsfiddle.net/jakecigar/XwN2L/2154/

Answer 4

我只是为了更好地理解而编辑您的代码

CSS：

/*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;
}

HTML：

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


            });
        </script>

PHP：

<?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>";
                    }
                ?>

检查JSfiddle以了解我要做什么http://jsfiddle.net/hiteshbhilai2010/arfLboy7/10/

同时可以创建div我试图让点击格之间有一定的参考desk_box和station_div进行切换。