javascript - 如何对多个 DIV 使用 JQuery 切换？

Question

更新代码

我发布了我的代码和 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

Answer 1

我已经测试过了。它的工作。

请移除 css 中的 Hover

.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');
});