我试图在点击另一个div时显示一个div.我是JQuery的新手，只想使用CSS，但由于我使用PHP在数据库中循环以显示创建的所有div.我需要使用JQuery单独显示隐藏的div。点击时
HTML：当点击desk_box时，将station_ifo显示在旁边一点，这样用户就可以不切换它
<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/
您的代码似乎可以工作，在jfiddle中只需从"Frameworks&Extensions"中选择，jquery则表示没有库
选择Fiddle中的jQuery框架以获得一个工作示例，然后在#station_ifo中添加一个边距，使您始终可以看到#desk_boxdiv。
#station_info {
display: none;
width:150px;
height:150px;
margin-left:100px; // <- this
border:4px solid black;
background-color:white;
}
http://jsfiddle.net/qmeepb36/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/
我只是在编辑您的代码，以便您更好地理解
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进行切换之间做一些参考。