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中只需选择＆＃34; Frameworks＆amp;扩展＆＃34; ，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时，我尝试在点击div desk_box和station_div之间进行切换。

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

4 个答案: