需要幫助保存在javascript中的onclick函數的文件

我需要幫助保存這個，我可以交換圖像，但不能保存它們。我想可能是更新按鈕來存儲圖像。或者在更改時自動保存。有人提到了cookies或其他東西。我不熟悉餅乾，並希望有一個更簡單的解決方案。實際頁面將有大約100張圖片，並且需要保存功能來永久保存更改。需要幫助保存在javascript中的onclick函數的文件

希望有人能想出解決辦法，一直在這幾個小時只走這麼遠感謝提前時間只盯着這個

<!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>

來源

2013-07-17 lnsflive

您需要將其保存，這樣當用戶重新加載頁面時，更改仍然做了什麼？我認爲這個工作的JSFiddle會很棒，所以我可以看到這實際上在做什麼。 – Shawn31313

這是我會做什麼（我希望這可以幫助）。

在JS（在服務器上）中構建圖像名稱的數組。
根據數組呈現HTML（通過JS）。
如果用戶進行圖像交換，請更改陣列並重新渲染。
- 呈現不應該需要拉從服務器上的任何數據，不會閃爍。
- onclick事件應該告訴更新函數正在更改哪個圖像。
如果你想保存的顯示順序，POST當前的陣列到服務器。

如果這聽起來太複雜了，看看這些

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

爲「真實」的代碼，我一般用測試用例開始...
這適用於FF和Opera（在Linux），而不是什麼MSIE測試。
允許最大的自由度沒有使用框架。
一切都在客戶端上運行，所以你可以查看/保存。

來源

2013-07-17 04:18:36

是的，聽起來更像我所需要的，雖然我不是那麼熟悉javasript，但是希望我能看到至少有兩張圖片的樣本，我可以做其他的事情 – lnsflive

需要幫助保存在javascript中的onclick函數的文件

回答

相關問題