1

我正在开发一个计数器应用程序，它使用 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();
  });

});​
4

1 回答 1

1

让我们试着把它分成几个部分。首先，您要增加所有计数器的值，因为用于获取您所追求的计数器的选择器会影响所有计数器，因此行为是正确的。让我解释：

当你这样做: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 并没有反映它，因此当您将内容保存在包含所有计数器的 div，您没有保存该value属性。要解决此问题，您最终会得到：

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

请注意，我不会修改您的任何其他代码或标记，并且我已将我的代码包围在您小提琴的一个分支中，并将其放在 Javascript 部分的顶部以便于定位。这是工作小提琴，能够添加新计数器，更改这些计数器的值及其标题，当然还有删除它们的选项（这已经在工作）。

享受！

资料来源：

于 2012-11-12T00:18:11.453 回答