Question

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

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

所以简而言之，我认为诀窍是使合成变量本地和全局可访问（或者至少可以访问需要它的函数...全局变量很糟糕！）从我所看到的这是完美的使用封闭的情况。然而，我对闭合的理解是朦胧的，我认为这可能是我实际上得到一个并且“真正得到它”的最佳例子，假设我可以引导水可以说。下面是代码以及带有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);



});

Answer 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 ]}); 
    synth.addEventListener("dblclick",createParameter, false); 

};

我在此函数结束时向synth添加了事件监听器，因此每个创建的合成器都可以对事件做出反应。

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/

在div中动态创建div和DOM元素的变量访问

1 个答案: