1

我正在尝试创建一个 div 元素，当它被单击时，它会创建一个新元素。在我的例子中，新元素是一个样式化的p元素。当点击p元素时，它会在p元素中创建一个新的li元素。我通过一个大函数完成了这项工作，但我正在尝试构建我的代码。我的新结构正在澄清，但给我带来了问题。

下面的代码有效，除了当我点击灰色圆圈时，它不会创建一个新的绿色小圆圈，这是它应该做的。我得到的错误说合成器变量不可访问。但是，当我将合成器变量设为全局时，我遇到了另一个问题，我只能启动一次createSynth函数......因此我无法创建多个灰色圆圈。

所以简而言之，我认为诀窍是使合成变量本地和全局可访问（或至少可以访问需要它的函数......全局变量不好！）从我读过的内容来看，这是使用的完美案例一个关闭。然而，我对闭包的理解是模糊的，我认为这可能是我真正得到一个并“真正得到它”的最佳例子，假设我可以被引导到水可以这么说。下面是代码以及带有 html 和 css 元素的 JS fiddle。

我想我可以通过将一个函数传递给一个参数（以某种方式）来解决这个问题，但我总是很好奇其他比我更有经验的人如何解决问题和结构代码。

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

我使用“this”而不是“synth”。由于 createParameter 将处理特定合成器的事件，因此该合成器将在该函数中变为“this”。

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

于 2013-01-06T00:16:36.503 回答