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(); 
});

2番目の部分はかなり単純で、フォーム属性を動的に変更するときに一部のブラウザーがDOMを変更できないことに起因します。つまり、入力の値は変更されますが、DOMはそれを反映しないため、コンテンツを保存するときにすべてのカウンターを含むdivには、value属性を保存していません。これを修正するには、次のようになります。

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

他のコードやマークアップを変更するつもりはないことに注意してください。コードをフィドルのフォークで囲み、見つけやすいようにJavascriptセクションの上部に配置しました。これが機能するフィドルです。新しいカウンターを追加したり、それらのカウンターとそのタイトルの値を変更したり、もちろんそれらを削除したりすることもできます（すでに機能していました）。

楽しみ！

出典：

于 2012-11-12T00:18:11.453 に答える