反應用與本地存儲

Question

我對使用mustache.js創建多個專櫃和使用本地存儲，記住你的數據計數器的應用程序的工作。您只需點擊'+'按鈕添加一個新的計數器，然後點擊添加按鈕來增加計數器。

我有幾個問題： - 當添加，並且有多個櫃檯，他們都增加。 - 當我點擊關閉按鈕時，計數器也增加。

是否也可以通過輸入字段中輸入標題和具有本地存儲記住了嗎？

任何幫助將不勝感激。如果你有任何解決方案，你能解釋一下嗎？

在這裏看到的小提琴：http://jsfiddle.net/techydude/MSnuE/

的Javascript：

$(function() { 
    var doc = $(document), 
     CounterContainer = $("#CounterContainer"), 
     //Container for all Counters 
     container = $(".counter"), 
     //Individual Conter Counters 
     counter = $(".valueCount"), 
     addBtn = $(".add"), 
     valueCount = $(".valueCount").html(), 
     addCounter = $("#create-counter"), 
     counterTemplate = Mustache.compile($("#counter-template").html()); 

    if (localStorage.counterSave) { 
    CounterContainer.html(localStorage.counterSave); 
    } 

    function save() { 
    localStorage.counterSave = CounterContainer.html(); 
    } 


    addCounter.submit(function(e) { 

    // prevent page from refresing 
    e.preventDefault(); 
    var value = 5; 
    makeCounter(value); 
    save(); 
    }); 

    function makeCounter(value) { 
    $(counterTemplate({ 
     txt: value 
    })).appendTo(CounterContainer); 
    } 



    CounterContainer.on("click", addBtn, function(valueCount) { 
    var EachContainer = $("div.valueCount"), 
     EachContainerValue = $("div.valueCount").html(); 

    EachContainer.html(++EachContainerValue); 

    console.log("test"); 

    save(); 
    }); 

    doc.on("click", "button.removeCounter", function() { 
    $(this).parent().remove(); 
    save(); 
    }); 

});​ 

Answer 1

讓我們試着闖進部分這一點。首先你要增加所有計數器的值，因爲選擇用來獲取你的櫃檯後影響所有計數器，ERGO的行爲是正確的。讓我來解釋：

當你這樣做：var EachContainer = $("div.valueCount")，jQuery的返回對象是該選擇所以如果有一個以上的櫃檯，都將受到影響匹配的所有元素。爲了解決這個問題，你可以使用this關鍵字DOM樹從你點擊該按鈕向上移動，並選擇與選擇的唯一的兄弟姐妹。

$(".add").live("click",function(){ 
     var counter = $(this).siblings(".valueCount"); 
     counter.html(parseInt(counter.text())+1); 
     save(); 
    }); 

這種方法解決你可能使用.click因爲一個隻影響在給定的時間創建的元素，而不是將來的遇到的問題。通過這個小改動，你現在可以創建多個計數器並保存它們的值。但不是冠軍，但

，第一部分是調用save方法在標題的每次修改，雖然這可能對其他活動，如onChange事件中完成，但因爲這可能會導致失去在某些情況下，標題和標題的長度應該是比較小的，你應該是罰款只是在做：

$(".title").live("keyup",function(){ 
    save(); 
}); 

第二部分是相當簡單的，來自無力的一些瀏覽器，當我們動態地改變DOM修改一個表單屬性，這意味着雖然你的輸入值改變了，但是DOM不會引用LECT它，爲此，當你節省包含所有計數器的DIV的內容，你是不是保存value屬性。爲了解決這個問題，你結束了：

$(".title").live("keyup",function(){ 
    $(this).attr('value',this.value); 
    save(); 
}); 

請注意，我不打算修改你的任何代碼或標記，我已經包圍我的代碼在你的提琴的一個分支，並把它放在Javascript部分的頂部以方便定位。這裏是working fiddle，可以添加新的計數器，改變這些計數器的值和它們的標題，當然也可以選擇刪除它們（它已經在工作）。

享受！

---

來源：

• Firefox not updating DOM
• The updated fiddle
• jQuery live method