php - 使用 php、mysql 和 jquery 使图像具有交互性和可交换性

Question

感谢您对此提供的任何帮助。我对所有这些东西都很陌生。

我创建了一个jquery“实时搜索”表单，它将表单的输入字符链接到我的mysql数据库中字母图稿的相关图像(例如，用户在实时搜索中输入f-l-o-w-e-r，php回显六个图像)。

以下是供引用的 php 代码，它将图像传递到 index.php 中的 div:

foreach(str_split($_POST['search_term']) as $alpha) 
        { 
        echo "<img src='../delete/images/{$alpharray[$alpha][0]['imagePath']}' width='100' height='140'></src></a>"; 
        } 

我希望用户单击其中一张图像来打开相关图像的轮播，他/她可以从中拖放新图像以替换旧图像。最终他们可以将整个自选的字母数组作为订单提交。

从 jquery 方面，我可以弄清楚轮播以及如何制作可拖动、可放置的东西。但我在脑海中很难想象如何完成可交换部分。创建一个新数组？也许有人可以通过一些提示帮助我弄清楚......？

非常感谢!

Answer 1

不确定你的问题到底是什么，但你可以读取 .each() 的图像源并将它们发布到你的 php 脚本中。看起来你有一个包含所有数据的数组，你只需读取你想要的元素。因此，您可以覆盖要更改的元素，或创建一个新数组，具体取决于您想要执行的操作。而且您还标记了您的问题 mysql，不太确定您的数据是如何存储的。

编辑:

<小时/>

好吧，我在这里看到两种可能的方法。一种方法是在创建时为 div 中的每个图像创建所有图像，如下所示:

foreach(str_split($_POST['search_term']) as $alpha) 
{ 
    echo "<img class="clickable" src='../delete/images/{$alpharray[$alpha][0]['imagePath']}' width='100' height='140'></src></a>"; 
    echo '<div class="editimages">';
    // Code that creates the images with which the above image can be replaced
    echo '</div>';
} 

缺点是，用户同时获取所有图像，这可能会加载缓慢并产生大量流量。好处是，它是最简单的解决方案，并且当用户单击时会快速 react 。你可以做类似的事情

$(".clickable").click(function(){
    $(".editimages").hide();
    $(this).next().show();
});

在你的 JS 中。

<小时/>

另一种解决方案是在用户想要编辑图像时单击加载图像。好处是，它只会加载您需要的图像，因此可以节省流量并在初始化时加载速度更快，但当用户想要查看它们时，它将开始获取替换图像，因此取决于服务器的速度和大小图像是，这可能会感觉有点慢。