Question

这是我的代码问题是：当我点击Detail链接时div快速打开，然后隐藏后，我想要显示不是被隐藏。只有在这个陈述中才能解决所有问题：

echo "<td>"."  <a  href='computer.php?id=$record[id]' onClick='opendiv();'  >Detail</a> ".";

但如果我改变上面的代码

echo "<td>"."  <a  href='#?id=$record[id]' onClick='opendiv();'  >Detail</a> "."'

div工作正常但在此时未选择id号码我想选择id链接的detail，以便从中检索信息使用id

的数据库

这是javascript代码：

function opendiv(){
document.getElementById("box").style.display="block"
}
function closediv(){
document.getElementById("box").style.display="none"
}

这是css代码：

#box{
display:none;
width:200px;
height:200px;
position:absolute;
top:40px; 
}


<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<script src="script.js"></script>
<?php
//---------------connect to db ----------
include 'connect.php';

$sql="SELECT `id`, `name`, `student`, `teacher`, `year`, `level`, `abstract` FROM `computer` ";
$mydata=mysql_query($sql);

while($record=mysql_fetch_array($mydata)){
include'generalvalue.php';
echo "<td>"."  <a  href='computer.php?id=$record[id]' onClick='opendiv();'  >Detail</a> "."</td>";
}//end while
?>
<div id="box"> 
<a href="#" onClick="closediv()" >Close</a><br><br>
<?php 
if(isset($_GET['id'])){
$id=$_GET['id'];
$sql="SELECT  * FROM `computer` where id='$id'";
$mydata=mysql_query($sql);
$row=mysql_fetch_array($mydata);
echo $row[6];
}//end if
?>
</div>
</body>
</html>

Answer 1

单击“详细信息”时使用<a>标记。如果您没有使用jquery / java-script阻止默认事件，则浏览器会根据默认标记行为重定向到浏览器中的“computer.php”。您可以使用以下内容：

echo "<td><a class='detail' href='#' data-id='" . $record['id'] . "'> Detail </a></td>";

<强>脚本：

<script>
$(function(){
    $("a.detail").click(function(e){
        e.preventDefault();
        var id = $(this).attr('data-id');
        // make ajax call to "computer.php"
        $.ajax({
            "url": "computer.php",
            "data": {"id": id},
            "type": "POST",
            "dataType": "json",
            "success": function(result) {
                if(result.status == "success"){
                    $("#yourDivID").html('').html(result.html);
                } else {
                    $("#yourDivID").html('').html(result.message);
                }
                //Show your div 
                $("#yourDivID").show();
            },
            "error": function(e) {}
        });
    });
});
</script>

在“computer.php”文件中，您可以使用以下代码来处理ajax请求

if( isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']==='XMLHttpRequest' ) {
    if(isset($_POST['id']) && intval($_POST['id']) > 0 ){
      $id = $_POST['id'];
      $sql = "SELECT * FROM `computer` where id='$id'";
      $mydata = mysql_query($sql);
      $row = mysql_fetch_array($mydata);      
      echo json_encode(array("status" => "success", "html" => "<h3>".$row[6]."</h3>"));
      die();
    } else {
        echo json_encode(array("status" => "error", "message" => "Please provide valid computer id to get detail."));
        die();
    }
}

单击链接时如何使div显示

1 个答案: