附加动态分区只有一次和的jsfiddle问题 [英] Append dynamic div just once and a JSFiddle issue
本文介绍了附加动态分区只有一次和的jsfiddle问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这code做的一切，我想在第一时间被点击表节点（图像添加等）。然而，被点击的第二节点时，选择再次出现，但两次等等。有没有适合我的元素追加只有一次的方式。我创建了问题的小提琴。它工作在Chrome，而不是对的jsfiddle本身。也许我错误地做一些事情。 http://jsfiddle.net/Inkers/NyxCu 感谢。
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备的宽度，高度=设备的高度，初始规模= 1.0，最大规模= 1.0/＆GT;
＆LT;间的charset = UTF-8/＆GT;
＆LT;标题＆GT;不管它将会是＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的字符集=utf-8SRC =fiddle.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT; ＆LT;身体GT;
＆LT; H3＆GT;创建一个新的表＆LT; / H3 GT＆;
＆LT; DIV ID =holdTable＆GT;
＆LT;表ID =chartInput＆GT;
＆LT;标签=TASKNAME＆GT;任务＆LT; /标签＆gt;
＆LT;输入ID =TASKNAME类型=文本占位符=等等等等＆GT;＆LT; BR＆GT; ＆LT;标签=天＆GT;多少天＆LT; /标签＆gt;
＆LT;输入ID =天NAME =天TYPE =号码最小=1最大=7＆GT;＆LT; BR＆GT; ＆LT;标签=时代＆GT;多少次，每天＆LT; /标签＆gt;
＆LT;输入ID =时代NAME =时代类型=数字分=1最大=4＆GT; ＆LT; BR＆GT; ＆LT;输入ID =createChart类型=按钮值=让台的onClick =makeChart（）;＆GT; ＆LT; BR＆GT; ＆LT; /表及GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT; VAR makeChart =功能（）{
无功表=使用document.createElement（'表'），
TASKNAME =的document.getElementById（'TASKNAME'）。值，
标题=使用document.createElement（'日'），
NUMDAYS =的document.getElementById（'天'）值，//列
howOften =的document.getElementById（'时间'）。值，//行
行，
R，
山坳，
C;header.innerHTML = TASKNAME;
table.appendChild（头）;header.innerHTML = TASKNAME;
table.appendChild（头）;功能addImage（COL）{
VAR IMG =新的图像（）;
img.src =http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png;
col.appendChild（IMG）;
img.onclick =功能（）{
VAR myImages =新的Array（）;
myImages [0] =http://www.olsug.org/wiki/images/9/95/Tux-small.png;
myImages [1] =http://a2.twimg.com/profile_images/1139237954/just-logo_normal.png;
对于（VAR I = 0; I＆LT; myImages.length;我++）{
VAR allImages =新的图像（）;
allImages.src = myImages [I] VAR my_div =使用document.createElement（分区）;
my_div.id =showPics;
document.body.appendChild（my_div）;
VAR newList =使用document.createElement（UL）;
newList.appendChild（allImages）;
my_div =的document.getElementById（showPics）;
my_div.appendChild（newList）;
my_div.style.display =块; allImages.onclick =功能（E）{
img.src = e.target.src;
my_div.style.display =无;
};
}
};
};
为（R = 0;为r howOften; R ++）{
行= table.insertRow（-1）;
为（C = 0;℃下NUMDAYS; C ++）{
COL = row.insertCell（-1）;
addImage（COL）;
}
}
的document.getElementById（'holdTable'）的appendChild（表）。
};
解决方案
有没有办法让我的元素追加只有一次？
是的。只要把下面一行在你的函数的末尾，所以它会工作只有一次
img.onclick =功能（）{
//其他code
img.onclick = NULL;
}
或者，也许你想为这个按钮
VAR makeChart =功能（）{
//其他code
的document.getElementById（'createChart'）的onclick = NULL。
}
This code is doing everything I want the first time a table node is clicked (image is added etc). However, when a second node is clicked the choices appear again, but twice and so on. Is there a way for me to append the elements just once. I have created a fiddle of the problem. It is working in Chrome, but not on the JSFiddle itself. Perhaps I am doing something incorrectly. http://jsfiddle.net/Inkers/NyxCu Thanks.
<html>
<head>
<meta name = "viewport" content="width=device-width, height= device-height, initial-scale=1.0, maximum-scale=1.0"/>
<meta charset=UTF-8"/>
<title>Whatever it is going to be</title>
<script type="text/javascript" charset="utf-8" src="fiddle.js"></script>
</head>
<body>
<h3>Create a new table</h3>
<div id="holdTable">
<form id="chartInput">
<label for="taskname">Task</label>
<input id="taskname" type="text" placeholder="Blah blah"><br>
<label for="days">How many days</label>
<input id="days" name="days" type="number" min="1" max="7"><br>
<label for="times">How many times a day</label>
<input id="times" name="times" type="number" min="1" max="4"> <br>
<input id="createChart" type="button" value="Make the table" onClick="makeChart();"> <br>
</form>
</div>
</body>
</html>
var makeChart = function () {
var table = document.createElement('table'),
taskName = document.getElementById('taskname').value,
header = document.createElement('th'),
numDays = document.getElementById('days').value, //columns
howOften = document.getElementById('times').value, //rows
row,
r,
col,
c;
header.innerHTML = taskName;
table.appendChild(header);
header.innerHTML = taskName;
table.appendChild(header);
function addImage(col) {
var img = new Image();
img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
col.appendChild(img);
img.onclick = function () {
var myImages = new Array();
myImages[0] = "http://www.olsug.org/wiki/images/9/95/Tux-small.png";
myImages[1] = "http://a2.twimg.com/profile_images/1139237954/just-logo_normal.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
var my_div = document.createElement("div");
my_div.id = "showPics";
document.body.appendChild(my_div);
var newList = document.createElement("ul");
newList.appendChild(allImages);
my_div = document.getElementById("showPics");
my_div.appendChild(newList);
my_div.style.display = 'block';
allImages.onclick = function (e) {
img.src = e.target.src;
my_div.style.display = 'none';
};
}
};
};
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
}
}
document.getElementById('holdTable').appendChild(table);
};
解决方案
Is there a way for me to append the elements just once ?
Yes. Just put following line at the end of your function, so it'll work only once
img.onclick = function() {
// other code
img.onclick=null;
}
Or maybe you want this for the button
var makeChart = function() {
// other code
document.getElementById('createChart').onclick=null;
}
这篇关于附加动态分区只有一次和的jsfiddle问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
