Question

我需要帮助保存这个，我可以交换图像但不保存它们。我想也许是一个更新按钮来存储图像。或者在进行更改时自动保存。有人提到饼干或其他东西。我不熟悉cookie，想要一个更简单的解决方案。实际页面将有大约100个图像，并且需要保存功能以永久保持更改。

希望有人能够解决这个问题，我已经花了好几个小时才能做到这一点提前谢谢你，看看这个

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Swap demo</title>

<style type="text/css">
#GALLERY td {
height: 200px; width: 200px;
text-align: center;
vertical-align: middle;
}
#GALLERY td img, #GALLERY td img.normal {
border: solid white 5px;
}
#GALLERY td img.highlighted {
border: solid red 5px;
}
</style>

</head>
<body>
  <table id="GALLERY">
  <tr>
      <td>
          <img src="http://www.clearviewarts.com/thumbnails/Puppy In Basket.jpg"      alt="Dogs"/>          
      </td>
      <td>
          <img src="http://www.clearviewarts.com/thumbnails/BabyIndy.jpg" alt="Dogs"/>          
      </td>
      <td>
          <img src="http://www.clearviewarts.com/thumbnails/HarlequinDane.jpg" alt="Dogs"/>          
      </td>
  </tr>
  <tr>
      <td>
          <img src="http://www.clearviewarts.com/thumbnails/Pug.jpg" alt="Dogs"/>          
      </td>
      <td>
          <img src="http://www.clearviewarts.com/thumbnails/Wagner-edit1.jpg" alt="Dogs"/>          
      </td>
      <td>
          <img src="http://www.clearviewarts.com/thumbnails/CanusAngelicus.jpg" alt="Dogs"/>          
      </td>
  </tr>
  </table>

<script type="text/javascript">
var pix = document.getElementById("GALLERY").getElementsByTagName("img");
for ( var p = 0; p < pix.length; ++p )
{
pix[p].onclick = picclick;
}

var firstImage = null;
function picclick( )
{
// to cancel a swap, click on first image again:
if ( firstImage == this ) 
{
    this.className = "normal";
    firstImage = null;
    return;
}
// is this first image clicked on?
if ( firstImage == null )
{
    // yes
    firstImage = this;
    this.className = "highlighted";
    return; // nothing more to do
}
// aha! second image clicked on, so do swap
firstImage.className = "normal";
var temp = this.src;
this.src = firstImage.src;
firstImage.src = temp;
firstImage = null;

}
</script>
</body>
</html>

Answer 1

这就是我要做的事情（我希望这会有所帮助）。

在JS（在服务器上）构建图像名称数组。
根据数组（通过JS）渲染HTML。
如果用户进行图像交换，请更改阵列并重新渲染。
- 渲染不需要从服务器提取任何数据，因此不会闪烁。
- onclick事件应告知更新功能正在更改哪个图像。
如果要保存显示顺序，请将当前阵列发回服务器。

如果这听起来太复杂，请看这些

看看http://owenberesford.me.uk/17690427/sample.html 但请知道：

对于“真实”代码，我通常以测试用例开始......
这适用于FF和Opera（均为Linux），未经过任何MSIE测试。
为了获得最大的自由，没有使用任何框架。
一切都在客户端上运行，因此您只需查看/保存即可。

需要帮助从javascript中的onclick函数保存文件

1 个答案: