Javascript 如何使用JQuery切换进行多重div？

更新代码

我将我的代码张贴在网上，并对其进行修改：

我更新了代码多亏了您的帮助，我非常感谢。我想知道如何在再次单击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;
}

<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>

/*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;
}

<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" -->

<?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>";
                    }
                ?>

JS:

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;
}

<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>

/*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;
}

<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" -->

<?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>";
                    }
                ?>

/*下面这两个函数都起作用，我想知道为什么我要使用其中一个而不是另一个？
当我重新单击station_info DIV时，如何关闭它*/
$（“.desk_box”）。单击（函数（）{
$（“.station_info”）.hide（）；//隐藏所有其他。
$（“#station_info”+$（this.attr（'data-station'））.show（）；
});
$（“.desk_box”）。单击（函数（）{
$（“.station_info”）.css（'display'，'none'）；
$（'div.station_info:contains（“+”（$（this）.text（））.replace（“：”，“is:”）+”）.css（'display'，'block'）；
});

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

while（$row=mysqli_fetch_assoc（$coord_result））{
//命名X，Y值
$id=$row['coordinate_id']；
$x_pos=$row['x_coord']；
$y_pos=$row['y_coord']；
//在X，Y坐标处绘制一个带DIV的长方体
回显“id:.$id.”；
echo“您好，id是：“.$id.”
部分：“.$sec_name.”
”；
}//边结束边循环

将类定义为.desk\u box和.station\u info类名称，而不是将它们定义为由特定对象ID识别的#desk\u box和#station\u 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>

$（文档）.ready（函数（）{
$（“.desk_box”）。单击（函数（）{
myIdNbr=$（this）.attr（'id'）；//获取活动的桌面盒id
myIdNbr=myIdNbr.substr（myIdNbr.lastIndexOf（“”“）+1）；//修剪id以获取最后一个nbr
$（“#station_info_u”+myIdNbr）.toggle（）；//从Id附加最后一个nbr以切换适当的station_info
});
});

我正在编辑您的代码，以便您更好地理解

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;
}

<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>

/*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;
}

<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" -->

<?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>";
                    }
                ?>

HTML:

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;
}

<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>

/*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;
}

<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" -->

<?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>";
                    }
                ?>

$（文档）.ready（函数（）{
$（“.desk_box”）。单击（函数（）{
$id=$（this.attr（“数据”）
$（“#站点信息”+$id）.toggle（）；
});
/*根据您的问题-->“我如何在station_info DIV上重新单击的功能中包含它将关闭？我必须刷新页面才能这样做”->

添加此jquery*/ $（“.station_info”）。单击（函数（）{ $（“.station_info”）.hide（） }); });

PHP:

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;
}

<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>

/*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;
}

<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" -->

<?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>";
                    }
                ?>

始终有一个电台处于开机状态
最简单的解决方案是在
桌面框的自定义属性中使用您现有的ID（
ID:84
）和
站点信息的ID
：

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

第二次单击同一个桌面框将隐藏站点
使用“慢”使它变得漂亮一点
或

我已经测试过了。它起作用了

请删除css中的悬停

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

在发布呈现的HTML后，PHP与此无关。如果你给div对一个类，而不是一个ID，或者另外给它一个ID，那会更容易。这个问题的标题让我头疼。如果我使用class，我想在单击它们时单独显示它们。我发布了PHP，因为这就是我创建多个“桌面盒”的方式DIVs@patricksweeney英雄联盟我不知道该放什么标题。这是新的提琴：希望这能澄清我认为在定制属性时最好使用
数据
为什么
数据站
只需使用
数据
嘿，它确实有效！你和这篇文章的最后一个答案都有效，我只是想知道哪一个更好，为什么？此外，我如何在功能中包括重新单击station_info DIV（它将关闭）的位置？我必须刷新页面才能这样做。再次感谢@还有，你怎么不包括（文档）。准备好（功能）？？我想更好地理解这一点。thanks@mario-`我如何将重新锁闭车站信息分区的功能包括在内，它将关闭？我必须刷新页面才能这样做-->检查我的答案我复制了准确的代码，而不是显示我的桌面盒分区，它只是在station\u info中打印他们的所有信息。你认为如果我用一个while循环来代替它，并对其中的两个div进行回音，而不是分别执行它们会更好吗？谢谢你需要这两个while loop
$coord\u result
和
$station\u result
是两个不同的东西你在cssno中隐藏了
station\u div
，我没有隐藏它。我正在使用此函数：$（“.desk_box”）。单击（函数（）{$（“.station_info”）.hide（）；//隐藏所有其他函数。$（“#station_info”+$（this.attr（'data'））.show（）；}）；如何在每次单击同一div时将其切换为打开/关闭？还有，我不能否认我没有足够的声誉：/哇，非常感谢你的帮助，它工作得很好！您是否介意解释代码的第三行，其中以“div.station_info:contains（此文本替换）css等”开头？我不明白那里发生了什么，你为什么要替换“：”和“是”？另外，当我重新点击同一电台时，如何包括它将关闭的信息分区？我必须刷新页面才能使其消失。另外，JQuery如何知道单击要显示的ID station\u信息？我只是不想复制这个，也不明白发生了什么。再次感谢！！很好的一个@akash，但为什么不使用toggleok呢。不客气。”“div”用于查找div，“.station\u info”用于筛选div