更新的代码
我已经发布了我的代码并显示了Fiddle:http://jsfiddle.net/02kcmzzn/
感谢您的帮助,我更新了代码,对此我非常感谢。我想知道如何再次单击station_info div时关闭它,因为如果仅刷新页面,它将消失。
CSS:
body {
margin:0px auto;
width:80%;
height:80%;
}
#map_size {
width:1190px;
height:1300px;
background:#0099FF;
border-style: solid;
border-color: black;
position: relative;
}
#desk_box {
width: 23px;
height: 10px;
border: 4px solid black;
padding:10px;
}
#station_info {
display: none;
width:150px;
height:150px;
border:4px solid black;
background-color:white;
}
JS:
<script type="text/javascript">
/* these two functions below WORK, I want to understand why would I use one over the other?
and how do I close the station_info DIV when I reclick on it?*/
$(".desk_box").click( function() {
$(".station_info").hide(); // to hide all the others.
$("#station_info"+ $(this).attr('data-station') ).show();
});
$(".desk_box").click(function () {
$(".station_info").css('display','none');
$('div.station_info:contains("'+ ($(this).text()).replace(":", " is:")+'")').css ('display','block');
});
</script>
的PHP
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."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>id:".$id."</div>";
echo "<div class='station_info' id='station_info".$id."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>Hello the id is:".$id."</br>Section:".$sec_name."</br></div>";
}//end while loop
最佳答案
我已经测试过了它的工作。
请在css中删除悬停
.desk_box:hover ~ .station_info {
display: block;
}
而不是将您的jquery click事件替换为下面的一个。这将仅显示单击的div信息。
$(".desk_box").click(function () {
$(".station_info").css('display','none');
$('div.station_info:contains("'+ ($(this).text()).replace(":", " is:")+'")').css('display','block');
});
关于javascript - 如何对多个DIV使用JQuery切换?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26244876/