如何使用JQuery切換功能在點擊時顯示/隱藏DIV？

Question

我想在點擊另一個DIV時顯示一個DIV。我是JQuery的新手，只想使用CSS，但由於我使用PHP來循環顯示所有創建的DIV，因此我需要使用JQuery分別顯示隱藏的DIV。當

HTML點擊：上desk_box節目點擊station_info有點側面時這樣用戶可以untoggle它

<div id="map_size" align="center"> 
    <div id='desk_box' style='position:absolute;left:20px;top:60px;'>id:84</div> 


    <div id='station_info' style='position:absolute;left:20px;top:60px;'>Hello the id is:203</br>Section:Section C</br></div> 

<script type="text/javascript"> 
       $(document).ready(
      function(){ 
      $("#desk_box").click(function() { 
      $("#station_info").toggle(); 
      }); 
      }); 
     </script> 

</div><!--map size--> 

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

PHP：

<?php 
include 'db_conn.php'; 

//query to get X,Y coordinates from DB for the DESKS 
$coord_sql = "SELECT coordinate_id, x_coord, y_coord FROM coordinates"; 
$coord_result = mysqli_query($conn,$coord_sql); 

//see if query is good 
if($coord_result === false) { 
    die(mysqli_error()); 
} 
/*************************************/ 
//query to show workstation/desks information from DB for the DESKS 
$station_sql = "SELECT coordinate_id, x_coord, y_coord, section_name FROM coordinates"; 
$station_result = mysqli_query($conn,$station_sql); 

//see if query is good 
if($station_result === false) { 
    die(mysqli_error()); 
} 
?> 
<?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 id='desk_box' 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  = $row['coordinate_id']; 
     $x_pos = $row['x_coord']; 
     $y_pos = $row['y_coord']; 
     $sec_name = $row['section_name']; 

    echo "<div id='station_info'style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>Hello the id is:".$id."</br>Section:".$sec_name."</br></div>"; 
        } 
       ?> 

的jsfiddle：http://jsfiddle.net/qmeepb36/

Answer 1

你的代碼似乎工作，在jfiddle只需選擇「框架&擴展」，jQuery的而不是沒有圖書館

Answer 2

選擇小提琴jQuery的框架，有一個工作的例子，然後添加一個保留到#station_info讓你總能看到#desk_box div。

#station_info { 
    display: none; 
    width:150px; 
    height:150px; 
    margin-left:100px; // <- this 
    border:4px solid black; 
    background-color:white; 
} 

http://jsfiddle.net/qmeepb36/3/

Answer 3

你會發現你的Jquery隻影響它找到的第一個#desk_box。

當你有多個盒子時，你需要稍微區分它們。

<a class="showSingle" target="1">Div 1</a> 

<a class="showSingle" target="2">Div 2</a> 

<a class="showSingle" target="3">Div 3</a> 

<a class="showSingle" target="4">Div 4</a> 

<div id="div1" class="targetDiv">Lorum Ipsum1</div> 
<div id="div2" class="targetDiv">Lorum Ipsum2</div> 
<div id="div3" class="targetDiv">Lorum Ipsum3</div> 
<div id="div4" class="targetDiv">Lorum Ipsum4</div> 

jQuery(function() { 
    jQuery('.showSingle').click(function() { 
     var index = $(this).index(), 
      newTarget = jQuery('.targetDiv').eq(index).slideDown(); 
     jQuery('.targetDiv').not(newTarget).slideUp(); 

    }); 
}); 

看這個的jsfiddle爲例： http://jsfiddle.net/jakecigar/XwN2L/2154/

Answer 4

我只是編輯的代碼爲您更好地瞭解

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


      }); 
     </script> 

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之間有一定的參考進行切換。