传递图像阵列的价值观和改变的onclick图像源 [英] Passing image array values and changing image source onclick
问题描述
确定，所以最后的一分钱我有这里的点击问题下降（大声弹响！）<一个href=\"http://stackoverflow.com/questions/14167952/append-dynamic-div-just-once-and-a-jsfiddle-issue\">Append动态分区只有一次和的jsfiddle问题。在code现在显示的用户图片的选择，每一次点击的节点。唷。
不过，现在我的 img.src = e.target.src 行是有问题的数组中访问其他图像。只在阵列中的最后一个图像将添加到表中。我想这是因为 allImages.onclick 事件应该是在循环中？
我已经试过了，然后 IMG 被显示为未定义。我猜那是因为环路（因此功能） IMG变种运行之前声明？我认为这是事物的秩序的问题。
所有帮助AP preciated。
VAR makeChart =功能（）{
无功表=使用document.createElement（'表'），
TASKNAME =的document.getElementById（'TASKNAME'）。值，
标题=使用document.createElement（'日'），
NUMDAYS =的document.getElementById（'天'）值，//列
howOften =的document.getElementById（'时间'）。值，//行
行，
R，
山坳，
C; 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 =无;
}
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 =功能（）{
my_div.style.display =块; allImages.onclick =功能（E）{//我觉得这是问题
img.src = e.target.src;
my_div.style.display =无;
img.onclick = NULL;
};
} } 为（R = 0;为r howOften; R ++）{
行= table.insertRow（-1）;
为（C = 0;℃下NUMDAYS; C ++）{
COL = row.insertCell（-1）;
addImage（COL）;
}
} 的document.getElementById（'holdTable'）的appendChild（表）。
的document.getElementById（'createChart'）的onclick = NULL。
}
好了，这个问题似乎来自不同的地方干。首先，
为（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 =无;
}
此循环将创建一个新的 DIV 在 myImages 每个图像，然后追加 UL 到 DIV ，最后追加图片当前图像到 UL 。
什么的document.getElementById（'showPics'）回报的问题，因为有许多 DIV 取值与 ID showPics 追加到体为 myImages.length ，有一个神秘的魔法答案应该永远不会说，甚至想到，再次
为什么不这样做合理的事情，并创建一个奇异的快乐 DIV 外循环？追加一个 UL 子吧，外循环。然后继续追加许多里如您在循环想要的。
VAR my_div =使用document.createElement（'DIV'）;
my_div.id ='showPics';
VAR newList =使用document.createElement（'UL'）;
my_div.appendChild（newList）;对于VAR I = 0; I＆LT; myImages.length;我++）{
...
VAR李=使用document.createElement（礼）;
li.appendChild（allImages）;
newList.appendChild（LI）;
...
}my_div.style.display =无;
现在， my_div 是唯一 DIV 包含图像。因此，点击事件处理程序可以安全地切换其可见性。
二，
函数addImage（COL）{
VAR IMG =新的图像（）;
img.src =http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png;
col.appendChild（IMG）;
img.onclick =功能（）{
my_div.style.display =块; allImages.onclick =功能（E）{//我觉得这是问题
img.src = e.target.src;
my_div.style.display =无;
img.onclick = NULL;
};
}
}
allImages 引用相同的图片对象，现在你跳出循环，这恰好是最后的在 myImages 图像。因此，只有在 myImages 的最后一个图像将注册处理程序，以一个点击事件。为了解决这个问题，我们做一个新的变量。
VAR SEL = NULL; //这都my_div前
现在，我们将添加点击处理程序 allImages 的循环，使内在 myImages 每一个形象得到了一块馅饼，因为他们说。
对于VAR I = 0; I＆LT; myImages.length;我++）{
VAR allImages =新的图像（）;
allImages.src = myImages [I] allImages.onclick =功能（E）{
如果（SEL！== NULL）{
sel.src = e.target.src;
my_div.style.display =无;
sel.onclick = NULL;
SEL = NULL;
}
};
...
}
最后，调整 addImage 让 SEL 可点击图像时进行设置。
函数addImage（COL）{
...
img.onclick =功能（）{
my_div.style.display =块;
SEL = IMG;
}
...
}
这就是全部了！ 例
请注意，如果您注释掉 sel.onclick = NULL ，您可以更改特定单元格的形象，只要你喜欢很多次了。
OK, so finally the penny dropped (loud clunk!) on the click issue I was having here Append dynamic div just once and a JSFiddle issue. The code now shows user a choice of pics once per node clicked. Phew.
However, now my img.src=e.target.src line is having trouble accessing the other images in the array. Only the last image in the array will add to the table. I think this is because the allImages.onclick event should be inside the loop?
I have tried that and then img is showing up as undefined. I'm guessing that is because the loop (and therefore the function) is running before var img is declared? I think it is an issue with the order of things.
All help appreciated.
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;
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 = 'none';
}
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 () {
my_div.style.display = 'block';
allImages.onclick = function (e) { // I THINK THIS IS THE PROBLEM
img.src = e.target.src;
my_div.style.display = 'none';
img.onclick=null;
};
}
}
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);
document.getElementById('createChart').onclick=null;
}
Well, the problem seems to stem from different parts. First of all,
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 = 'none';
}
This loop creates a new div for EACH image in myImages, then appends a ul to that div, and finally appends the Image for the current image to the ul.
The question of what document.getElementById('showPics') returns, since there are as many divs with the id showPics appended to body as myImages.length, has a mystical magical answer which should never be spoken, or even thought, of again.
Why not do the sensible thing and create one singular happy div outside the loop? Append a single ul child to it, outside the loop. Then proceed to append as many li as you want in the loop.
var my_div = document.createElement('div');
my_div.id = 'showPics';
var newList = document.createElement('ul');
my_div.appendChild(newList);
for var i = 0; i < myImages.length; i++) {
...
var li = document.createElement('li');
li.appendChild(allImages);
newList.appendChild(li);
...
}
my_div.style.display = 'none';
Now, my_div is the one and only div containing the images. So, the click event handlers can toggle its visibility safely.
Second,
function addImage(col) {
var img = new Image();
img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
col.appendChild(img);
img.onclick = function () {
my_div.style.display = 'block';
allImages.onclick = function (e) { // I THINK THIS IS THE PROBLEM
img.src = e.target.src;
my_div.style.display = 'none';
img.onclick=null;
};
}
}
allImages references the same Image object now that you are out of the loop, which happens to be the last image in myImages. So, only the last image in myImages will register the handler to a click event. To solve this problem, we make a new variable.
var sel = null; //This comes before my_div
Now, we add the click handler to allImages inside the loop so that every image in myImages gets a piece of the pie, as they say.
for var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
allImages.onclick = function (e) {
if(sel !== null) {
sel.src = e.target.src;
my_div.style.display = 'none';
sel.onclick=null;
sel = null;
}
};
...
}
And finally, adjust addImage so that sel can be set when the image is clicked.
function addImage(col) {
...
img.onclick = function () {
my_div.style.display = 'block';
sel = img;
}
...
}
That's all there is to it! Example.
Note that, if you comment out sel.onclick = null, you can change a particular cell's image as many times you like.
这篇关于传递图像阵列的价值观和改变的onclick图像源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
