2013-12-22 2 views
0

안녕하세요 저는 javascript/php/html을 사용하고 있으며 "자동차"에 대한 정보를 표시 할 때 더 많은 정보를 클릭하면 "추가 정보"가 같은 자동차에 표시되고 자동차 탭을 숨 깁니다 (이 모든 정보는 데이터베이스에서 가져옵니다).onclick/javascript 함수를 통해 추가 정보 표시

그러나 지금 나는이 정보를 표시하려고 노력하고 있지만 각 "자동차"는 자체 "추가 정보"를 갖기 때문에 클릭 할 때 "자동차 옆에있는 자동차 정보를 보여줍니다 ". 그리고 다른 차를 클릭하면 이전의 추가 정보가 숨겨지고 새로운 정보가 표시됩니다. 링크가 ... 아무것도하지 않는

자바 스크립트 여기

내가 그것을했을 방법이지만, 그냥 링크를 표시

<html> 
<head> 
<script type="text/javascript"> 

function toggle_visibility(id) { 
     var thelist = document.getElementsByClassName("alist"); 
     for (var i = 0; i < thelist.length; i++) { 
      thelist[i].style.display = 'none'; 
     } 
     var e = document.getElementById(id); 
     if(e.style.display == 'block') { 
      e.style.display = 'none'; 
     } else { 
      e.style.display = 'block'; 
     } 
    } 
//]]> 

</script> 
</head> 

PHP :

<body> 

     <a href="#" onclick="toggle_visibility('list1');"> 
     <p>Car information</p> 
    </a> 
    <div id="list1" class="alist" style="display:none;"> 

<?php 

$sql = "SELECT * from Car"; 
$result = mysql_query ($sql); 
while ($details = mysql_fetch_array ($result)) 
    { 
     $display = "<p>"; 
     $display.= $details["carMake"] . "&nbsp;"; 
     $display.= $details["carModel"]; 
     $display.="<a href='#' >More information</a>"; 
     $display.="</p>"; 
     echo ($display); 
    } 
?> 
     </div> 

    <a href="#" onclick="toggle_visibility('list2');"> 
     <p>More information</p> 
    </a> 

    <div id="list2" class="alist" style="display:none;"> 

<?php 

$sql = "SELECT * from Car"; 
$result = mysql_query ($sql); 
while ($details = mysql_fetch_array ($result)) 
    { 
     $display = "<p>"; 
     $display.= $details["carMileage"]; 
     $display.= $details["carColour"]; 
     $display.= $details["carMOT"]; 
     $display.= "</p>"; 
     echo ($display); 
    } 
?> 
    </div> 
</body>  
</html> 
+1

새 코드에서 mysql_ * 함수를 사용하지 마십시오! 왜 동일한 쿼리를 두 번 수행합니까? –

+0

두 번째 부분에서 mysql을 없애 버렸지 만 더 많은 정보 링크를 클릭하면 아무 것도 올라 가지 않습니다. – user3104737

답변

0

함수의 첫 번째 부분을 다음으로 바꿉니다.

function toggle_visibility(evt, id) { 
    var ev = evt || window.event; 
    ev.preventDefault(); 
    ... 
}; 

링크 (<a href="#">)가 # 페이지 (현재 페이지)를로드하지 못하도록합니다.

<a href="#" onclick="toggle_visibility(event, 'list1');"> 

또는 ... 당신은 지옥 쉽게이 모든 일을하고 jQuery를 사용할 수 있습니다 또한 링크에서이를 사용하도록 HTML을 변경해야합니다.