Question

目前我正在开发文章发布应用程序的移动版本。我想让用户搜索他们的图片，就像在Google图片上搜索图片一样（填写关键字，点击图片，在图片之间来回滑动）

用户可以选择他们的关键字，之后将显示一系列图像（如图库/幻灯片）。当他们浏览这些图像并停在特定图像时，我想知道当前的ID值（来自数据库）。如果我使用'value'代码或<img>代码中的<input type='image' />字段，我无法获得任何信息，此外我暂时无法想到任何其他解决方案。

这听起来有点抽象，虽然我仍然希望有人能给我一个建议

修改

例如，当我只用1张图像尝试时，我有以下两种可能性：

$sql = "SELECT *
                  FROM picture
                  WHERE picture_id = :picture";

$con->query($sql);
$con->bind(":picture", $picture_id);
$con->execute();

$record = $con->getRow();

echo "<input type='image' name='image' value=".$record["picture_id"]." src=\"http://www.mysite.com/img/".$record['picture_directory'].$record['picture_name']."\" />";

或我使用时：

echo "<img name=\"image\" src=\"http://www.mysite.com/img/".$record['picture_directory'].$record['picture_name']."\" alt=\"Smiley face\" value=". $record["picture_id"]. " height='42' width='42'>";

当我将表单提交到下一页时，我没有获得'name'属性的值

Answer 1

您可以使用数据属性：

<img src="example.png" data-picture_id="'.$record['picture_id'].'" />

并在用户点击图片后立即填写隐藏的输入字段：

<input type="hidden" name="selected_image" value="" />

//Bind click to images that have the data-picture_id attribute:
$("img[data-picture_id]").click(function(e){

  //Set the value of the hidden input field
  $("input[name='selected_image']").val($(this).data('picture_id'));
});

这样，您可以使用$ _POST ['selected_image']来获取所选图像的ID。

Answer 2

为什么不使用隐藏输入和常规图像标记？只要确保它在表单中。

<input type="hidden" name="picture_id" value="<?php echo $record["picture_id"] ?>">

一些事情，只是向HTML元素添加value属性不会使其行为像输入。此外，在输入类型图像上使用value不起作用。您将获得与输入名称相关联的图像的X和Y（我相信）。

Answer 3

您可以使用html5数据属性。在您的PHP代码中生成与此类似的图像：

foreach($images as $key => $img){
   echo '<img src="'.$img['path'].'" data-image-id="'.$img['image_id'].'">'
}

甚至使用元素默认id属性

foreach($images as $key => $img){
   echo '<img src="'.$img['path'].'" id="img'.$img['image_id'].'">'
}

无论如何，接下来应该做的是当用户停止滑动/滑动时检查相对于容器的图像位置偏移以获得当前图像的id。或者根据您的滑块跟踪当前显示的图像索引。

这些可能会派上用场：

jquery .offset（）http://api.jquery.com/offset/

jquery .position（）http://api.jquery.com/position/

获取所选图像的值

3 个答案: