更新的代码

我已经发布了我的代码并显示了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/

10-12 13:04
查看更多