javascript - 在div内动态创建div和DOM元素的变量访问

Question

我正在尝试创建一个 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);



});

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

};

我在此函数末尾添加了事件监听器到合成器，因此每个创建的合成器都可以对事件使用react。

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/