我在客户端使用PhoneGap，在服务器端使用XAMPP。
Live Search的工作原理：有一个搜索栏，其中包含所有项目的列表。在搜索字段中键入的字符越多，显示的项目就越少，直到基于mySQL数据库有一个或没有剩下的项目。每个项目都显示多个数据，包括图像。
问题：带有fadeToggle jQuery的按钮没有显示mySQL数据库中的任何图像。如果没有按钮和fadeToggle jQuery，则会显示图像。但我最初需要隐藏图像，并且只在用户请求时显示它们。
我在PHP文件中将我的img属性设置为style =“display：none”。
有没有办法单独显示这些图像而不是一次显示所有图像？
原因：加载数据库中的每个图像，特别是在移动设备上，需要很长时间，特别是当条目数超过100时。
这个单独的问题已在评论中得到解决：我似乎无法显示插入数据库的路径中的任何图像。它显示了一个破碎的图像。当我右键单击损坏的图像并在新选项卡中打开图像时，会出现此错误消息Cannot GET /artwork/image.jpg
PHP :(服务器）
<?php
//fetch.php
header("Access-Control-Allow-Origin: *");
$con = mysqli_connect('localhost', 'root', '', 'qc_artwork') or die ("could not connect database");
$output = '';
if(isset($_POST["query"])){
$search = mysqli_real_escape_string($con, $_POST["query"]);
$query = "
SELECT * FROM artwork
WHERE name LIKE '%".$search."%'
OR barcode LIKE '%".$search."%'
";
}
else{
$query = "
SELECT * FROM artwork ORDER BY name ASC
";
}
$result = mysqli_query($con, $query);
if(mysqli_num_rows($result) > 0){
$output .= '
<div class="table-responsive">
<table class="table table bordered">
<tr>
<th>Name</th>
<th>Path</th>
<th>Barcode</th>
<th>Type</th>
</tr>
';
while($row = mysqli_fetch_array($result)){
$output .= '
<tr>
<td>'.$row["name"].'</td>
<td><button>Show Image</button><img style="display: none" height="130" width="220" src="http://localhost/'.$row["path"].'"/></td>
<td>'.$row["barcode"].'</td>
<td>'.$row["type"].'</td>
</tr>
';
}
echo $output;
}
else{
echo 'Data Not Found';
}
?>
Index.html :(客户 - PhoneGap）
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ionic.css">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
load_data();
function load_data(query){
$.ajax({
url:"localhost/fetch.php",
method:"POST",
data:{query:query},
success:function(data){
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != ''){
load_data(search);
}
else{
load_data();
}
});
// Display Image with button
$('button:first').click(function() {
$('img:first').fadeToggle('fast');
});
});
</script>
</head>
<body>
<div class="bar bar-header bar-positive" style="margin-bottom:80px;">
<a href="index.html" class="button button-clear">Home</a>
<h1 class="title">Search Database (JSON)</h1>
</div><br/><br/>
<div class="container">
<br/>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Search</span>
<input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" />
</div>
</div>
<br/>
<div id="result"></div>
</div>
</body>
</html>
我的SQL表包含5列：
我无法为每个图像专门设置一个按钮来单独显示，但我设法有一个按钮来显示或隐藏所有图像作为一个整体。
jQuery的：
// Display image
$('#show_image').on('click', function() {
$('img').fadeToggle('fast');
});
PHP：
while($row = mysqli_fetch_array($result)){
$output .= '
<tr>
<td>'.$row["name"].'</td>
<td>'.$row["barcode"].'</td>
<td>'.$row["type"].'</td>
</tr>
<tr>
<td colspan="3"><img style="display: none; max-height: 100%; max-width: 100%" src="http://localhost/'.$row["path"].'"/></td>
</tr>
';
}
和我的button：
<button id="show_image">Image</button>