1

div 要素を作成しようとしていますが、クリックすると新しい要素が作成されます。私の場合、新しい要素はスタイル付きのp要素です。p要素をクリックすると、p 要素内に新しいli要素が作成されます。1 つの大きな関数を使用してこの作業を行いましたが、コードを構造化しようとしています。私の新しい構造化は明確ですが、私に問題を提示しています。

以下のコードは、灰色の円をクリックしても新しい小さな緑色の円が作成されないことを除いて機能します。表示されるエラーは、synth 変数にアクセスできないことを示しています。ただし、synth 変数をグローバルにすると、別の問題が発生します。createSynth関数を 1 回しか起動できないため、複数の灰色の円を作成できません。

つまり、要するに、シンセ変数をローカルおよびグローバルにアクセスできるようにすることです（または、少なくともそれを必要とする関数にアクセスできるようにすることです...グローバル変数は悪いです！）私が読んだことから、これは使用するのに最適なケースです閉鎖。しかし、クロージャーについての私の理解は曖昧であり、これは、いわば水につながることができると仮定して、実際にクロージャーを手に入れて「本当に理解する」ための最適な例かもしれないと考えています. 以下は、html 要素と css 要素を使用したコードと JS フィドルです。

関数を引数に渡すだけでおそらくこれを解決できると思いますが（何らかの方法で）、私よりも経験豊富な他の人が問題や構造コードをどのように解決するのか常に興味があります。

http://jsfiddle.net/taoist/rfFtY/1/

$(function() {

var orangeButton;
var applicationArea = document.getElementById("applicationArea"),
orangeButton = document.getElementById("orangeButton"),
counter = 1;




var createSynth = function() {
    var synth = document.createElement("p"); 
    synth.id = "synth" + (counter++);
    applicationArea.appendChild(synth);
    $(synth).draggable({ snap: true });
    $(synth).draggable({ grid: [ 20,20 ]});


};



var createParameter = function () {
    var synthParams = document.createElement("li");
    synthParams.id = "synthParams" + (counter++);
    synth.appendChild(synthParams);
    $(synthParams).draggable({ snap: true });
    $(synthParams).draggable({ grid: [ 20,20 ] });

};




orangeButton.addEventListener("click",createSynth, false);
synth.addEventListener("dblclick",createParameter, false);



});
4

1 に答える 1

0

私はこのようにそれを解決します：

var createSynth = function() {
    var synth = document.createElement("p"); 
    synth.id = "synth" + (counter++);
    applicationArea.appendChild(synth);
    $(synth).draggable({ snap: true });
    $(synth).draggable({ grid: [ 20,20 ]}); 
    synth.addEventListener("dblclick",createParameter, false); 

};

この関数の最後にシンセにイベント リスナーを追加したので、作成されたすべてのシンセがイベントに反応できるようになりました。

var createParameter = function () {
    var synthParams = document.createElement("li");
    synthParams.id = "synthParams" + (counter++);
    this.appendChild(synthParams);
    $(synthParams).draggable({ snap: true });
    $(synthParams).draggable({ grid: [ 20,20 ] });
};

orangeButton.addEventListener("click",createSynth, false);

「シンセ」の代わりに「これ」を使いました。createParameter は特定のシンセのイベントを処理するため、そのシンセはその関数で「this」になります。

JSFiddle: http://jsfiddle.net/sU3uy/1/

于 2013-01-06T00:16:36.503 に答える