![](/img/trans.png)
[英]Using javascript I would like to add an image as a link, but would like to change the image about every third time someone visits
[英]I would like to add condition to change Image in this script or create new
我想通過使用val["id"]
定義條件來更改圖像:
if (val["id"] > 10) {
//show the first image
} else if (val["id"] > 20) {
//show the second image
} else {
//show the third image
};
我不了解Ajax的某些語法,您能幫我完成上述條件嗎
function getDataFromDb() {
$.ajax({
url: "getData.php",
type: "POST",
})
.success(function(result) {
var obj = jQuery.parseJSON(result);
if (obj != '') {
//$("#myTable tbody tr:not(:first-child)").remove();
$("#myBody").empty();
$.each(obj, function(key, val) {
var tr = "<tr>";
tr = tr + "<td>" + val["id"] + "</td>";
tr = tr + "<td>" + val["first_name"] + "</td>";
tr = tr + "<td>" + val["last_name"] + "</td>";
tr = tr + "<td>" + val["age"] + "</td>";
tr = tr + "<td>" + val["hometown"] + "</td>";
tr = tr + "<td>" + val["job"] + "</td>";
tr = tr + "</tr>";
$('#myTable > tbody:last').append(tr);
});
}
});
}
setInterval(getDataFromDb, 100); // 1000 = 1 second
可能這會有所幫助。
function getDataFromDb() {
$.ajax({
url: "getData.php",
type: "POST",
})
.success(function(result) {
var obj = jQuery.parseJSON(result);
if (obj != '') {
//$("#myTable tbody tr:not(:first-child)").remove();
$("#myBody").empty();
$.each(obj, function(key, val) {
var tr = "<tr>";
tr = tr + "<td>" + val["id"] + "</td>";
tr = tr + "<td>" + val["first_name"] + "</td>";
tr = tr + "<td>" + val["last_name"] + "</td>";
tr = tr + "<td>" + val["age"] + "</td>";
tr = tr + "<td>" + val["hometown"] + "</td>";
tr = tr + "<td>" + val["job"] + "</td>";
tr = tr + "<td>" + "<img src='" + GetImage(parseInt(val["id"]))+ "'>" + "</td>";
tr = tr + "</tr>";
$('#myTable > tbody:last').append(tr);
});
}
});
}
function GetImage(id){
if (val["id"] < 10) {
return "images/img01.jpg"; // edit this to which works for you
} else if (val["id"] < 20) {
return "images/img02.jpg"
} else {
return "images/img03.jpg"
};
}
setInterval(getDataFromDb, 100); // 1000 = 1 second
該函數假定,如果Id小於10,則顯示第一;如果Id小於20,則顯示第三。 您的初始邏輯將顯示第一張圖像(如果id為10+表示無害)。
index.php
<!DOCTYPE html>
<html>
<head>
<title>TEST REAL TIME UPDATE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<script>
function getDataFromDb()
{
$.ajax({
url: "getData.php" ,
type: "POST",
data: ''
})
.success(function(result) {
var obj = jQuery.parseJSON(result);
if(obj != '')
{
//$("#myTable tbody tr:not(:first-child)").remove();
$("#myBody").empty();
$.each(obj, function(key, val) {
var tr = "<tr>";
tr = tr + "<td>" + val["id"] + "</td>";
tr = tr + "<td>" + val["first_name"] + "</td>";
tr = tr + "<td>" + val["last_name"] + "</td>";
tr = tr + "<td>" + val["age"] + "</td>";
tr = tr + "<td>" + val["hometown"] + "</td>";
tr = tr + "<td>" + val["job"] + "</td>";
// tr = tr + "<td>" + "<img src='" + GetImage(parseInt(val["id"]))+"'>" + "</td>";
tr = tr + "</tr>";
$('#myTable > tbody:last').append(tr);
});
}
});
}
// function GetImage(id){
// if (val["id"] < 10){
// return "pic/img1.jpg"
// } else if (val["id"] < 20){
// return "pic/img2.jpg"
// } else {
// return "pic/img3.jpg"
// };
// }
setInterval(getDataFromDb, 100); // 1000 = 1 second
</script>
</head>
<body>
<center>
<h1>TEST AJAX CHANGE PICTURE</h1>
</br>
<table width="600" border="1" id="myTable">
<!-- head table -->
<thead>
<tr>
<td width="91"> <div align="center">ID </div></td>
<td width="98"> <div align="center">First_Name </div></td>
<td width="198"> <div align="center">Last_Name</div></td>
<td width="97"> <div align="center">Age </div></td>
<td width="59"> <div align="center">Hometown </div></td>
<td width="71"> <div align="center">Job </div></td>
<!-- <td width="198"> <div align="center"> Pic</div></td> -->
</tr>
</thead>
<!-- body dynamic rows -->
<tbody id="myBody"></tbody>
</table>
<center>
</body>
</html>
getData.php
<?php
$objConnect = mysql_connect("localhost","root","") or die(mysql_error());
$objDB = mysql_select_db("ajax_demo");
$strSQL = "SELECT * FROM my_db WHERE 1 ORDER BY id DESC limit 1 ";
$objQuery = mysql_query($strSQL) or die (mysql_error());
$intNumField = mysql_num_fields($objQuery);
$resultArray = array();
while($obResult = mysql_fetch_array($objQuery))
{
$arrCol = array();
for($i=0;$i<$intNumField;$i++)
{
$arrCol[mysql_field_name($objQuery,$i)] = $obResult[$i];
}
array_push($resultArray,$arrCol);
}
mysql_close($objConnect);
echo json_encode($resultArray);
?>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.