我正在尝试创建一个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);
});
答案 0 :(得分: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);
};
我在此函数结束时向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/