Question

更新代码

我发布了我的代码并且小提琴：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

Answer 1

我测试了它。它的工作。

请在css中删除Hover

.desk_box:hover ~ .station_info {
    display: block;
}

将jquery点击事件替换为下面的事件。这将仅显示单击的div信息。

$(".desk_box").click(function () {
    $(".station_info").css('display','none');
    $('div.station_info:contains("'+ ($(this).text()).replace(":", " is:")+'")').css('display','block');
});

Answer 2

不要将您的类作为特定对象ID识别的#desk_box和#station_info，而是将它们定义为类名为.desk_box和.station_info。并按照以下方式更改您的javascript部分...

<script type="text/javascript">
                $(document).ready(function () {
                $(".desk_box").click(function () {
                     myIdNbr = $(this).attr('id');//Getting the active desk_box id
                     myIdNbr  = myIdNbr .substr(myIdNbr.lastIndexOf('_')+1);//Triming the id to get last nbr
                    $("#station_info_"+myIdNbr).toggle();//append the last nbr from Id to toggle appropriate station_info
                });
                });
        </script>

Answer 3

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

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

             /* based on your question -->"how can I include in the function where reclicked on the station_info DIV it will close? I have to refresh the page in order to do so" -->

添加此jquery * / $（“。station_info”）。click（function（）{ $（ “station_info”）。隐藏（） }）; }）;

<强> 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之间进行切换。

Answer 4

One Station Always Up

最简单的解决方案是在id:84的自定义属性和desk_box的ID中使用您现有的ID（station_info）：

 <div class='desk_box' data-station='84'>id:84</div>
 <div class='station_info' id='station_info84'>id:84</div>

然后，一个类似于其他答案的小jQuery应该没有任何问题：

 $(".desk_box").click( function() {
   $(".station_info").hide();   // to hide all the others.
   $("#station_info"+ $(this).attr('data-station') ).show();
 });

第二次单击相同的desk_box将隐藏电台

 $(".desk_box").click( function() {
   $(".station_info").hide();   // to hide all the others.
   $("#station_info"+ $(this).attr('data-station') ).toggle();
 });

使用“慢”

让它变得有点漂亮

 $("#station_info"+ $(this).attr('data-station') ).show("slow");

OR

 $("#station_info"+ $(this).attr('data-station') ).toggle("slow");

如何使用JQuery切换多个DIV？

4 个答案:

One Station Always Up

第二次单击相同的desk_box将隐藏电台

使用“慢”