2013-03-08 65 views
0

我有一個應用程序,用於將li元素添加到網頁中。當我在網頁上將其標記爲「已完成」時,我需要將元素的類名稱更改爲「已完成」。 (它應該說完成:是)。用我目前的代碼,我無意中在本地存儲中創建兩個項目,一個完成:true和另一個完成:false。我會告訴我的代碼在這裏:在localStorage上標記項目「已完成」

function updateDone(e) { 
    var spanClicked = e.target; 
    var id = spanClicked.parentElement.id; 
    var done = spanClicked.parentElement.className; 
    spanClicked.innerHTML = " ✔ "; 
    spanClicked.setAttribute("class", "done"); 
    var key = "todos" + id; 

    for(var i = 0; i < todos.length; i++) { 
    if(todos[i].id == id) { 
     var mark = todos[i]; 
     mark.done = true; 
     console.log(mark); 
     spanClicked.setAttribute("class", "done"); 
     var newKey = JSON.stringify(mark); 
     localStorage.setItem(key, newKey); 

     if(mark.done == false) { 
     spanClicked.setAttribute("class", "not done"); 
     spanClicked.innerHTML = "not done"; 
     } 
    } 
    } 
} 

他們都標有相同的ID這是我如何跟蹤每個項目的,竟然有兩個人。另外,當我刷新頁面時,會顯示兩個列表項,其中一個標記爲已完成。我的問題是如何防止創建另一個項目,而只是在localStorage中標記一個項目?

+0

a [live-example](http://jsfiddle.net/)將會得心應手 – nimrod 2013-03-08 23:52:19

+0

實際上,一個活的例子對於診斷問題是必要的,因爲通過查看這段代碼我不知道事件是如何發生的或任何東西。將標記和JavaScript放入jsfiddle之類的東西中,您將獲得幫助! – nimrod 2013-03-08 23:58:27

回答

0

您需要一種方法來唯一標識每個項目,因此您可以確保您的標記設置在您打算的項目上,而不是覆蓋,因爲您可能有兩個項目具有相同的密鑰。既然你是循環列表,也許你可以改變你的密鑰由兩部分組成。

var parent_key = "todos" + parent_id;

,然後在循環:

var store_key = parent_key + ":" + i; ... localStorage.set(store_key,newKey);

這種方式(只要順序將是一致的),也可以分開多個列表元素來自同一父母。

正如所評論的,jsFiddle中的一個實例或其他東西可以幫助您更好地滿足您的需求。

但是,如果此解決方案不足,您可以嘗試以下想法,在localstorage中有效設置「表」。

var parent_key = "todos" + id; 
var parent_table = {}; 
// for loop 
    parent_table[i] = newKey; 
// end of for loop 
localStorage.set(parent_key,parent_table); 

因此,您在本地存儲器內部有一個表格,爲您提供更精細的粒度。