jquery - 循环内的 appendChild 问题
问题描述
我使用以下代码创建具有弹出功能的图像滑块以显示缩放版本。在这里,对于 360 度视图图像,我添加了叠加图像。
$('.imageSet').each(function(){
$(this).css({left : left+'%'});
var mainImgWrapper = document.createElement("DIV");
var mainImg = document.createElement("IMG");
mainImg.src = $(this).attr('data-big');
mainImgWrapper.id = $(this).attr('data-img-id');
var orbitImg = document.createElement("IMG");
orbitImg.src = "/base/media/img/icons/rotate.png";
orbitImg.className = 'orbitIcon';
if($(this).hasClass('orbitView')){
mainImgWrapper.className = 'mainImage orbitView clickable';
mainImgWrapper.appendChild(orbitImg);
}else{
mainImgWrapper.className = 'mainImage clickable';
}
mainImgWrapper.style.left = 'calc('+(imgCount*100)+'% + '+imgCount+'px)';
mainImgWrapper.appendChild(mainImg);
$('#mainImages').append(mainImgWrapper);
var popImgWrapper = document.createElement("DIV");
var popImg = document.createElement("IMG");
popImg.src = $(this).attr('data-big');
popImgWrapper.dataset.imgId = $(this).attr('data-img-id');
if($(this).hasClass('orbitView')){
popImgWrapper.className = 'popImage orbitView';
popImgWrapper.appendChild(orbitImg);
}else{
popImgWrapper.className = 'popImage';
}
popImgWrapper.style.left = (imgCount*100)+'%';
popImgWrapper.appendChild(popImg);
$('#imagePopupView').append(popImgWrapper);
imgCount++;
left = left + 25.5;
});
当 .imageSet 具有类“orbitView”时,我将 orbitImg 附加到 mainImgWrapper 并对 popImgWrapper 执行相同操作。但 orbitImg 仅附加到 popImgWrapper。我找不到代码或执行环境中的任何问题。我可能会错过一些我自己看不到的东西。
解决方案
我在这里找到了问题。至于 HTML 标准,您不能两次附加一个 html 节点。如果你这样做,它只会执行最后一次尝试。原因是如果您不小心向 html 节点添加了一个 ID,并且如果 HTML 允许您多次添加同一个节点作为子节点,它将多次重复相同的 ID。您可以从以下两个小提琴的示例中看到它。它如何覆盖将相同节点附加为子节点的尝试以及附加不同节点时的工作方式。因此,如果您需要在循环中附加某些内容,则每次都需要创建一个新节点。在我的情况下,我什至不得不在循环内两次附加相同的节点。所以每次我通过循环时,我最终都会创建两个新节点。
附加两次的同一个孩子仅适用于第二个 div
var mainImgWrapper = document.createElement("DIV");
mainImgWrapper.style.width = 100+'px';
mainImgWrapper.style.height = 100+'px';
mainImgWrapper.style.background = 'red';
var secondImgWrapper = document.createElement("DIV");
secondImgWrapper.style.width = 100+'px';
secondImgWrapper.style.height = 100+'px';
secondImgWrapper.style.background = 'green';
var appendChild = document.createElement("IMG");
appendChild.src = 'https://images.pexels.com/photos/457702/pexels-photo-457702.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';
appendChild.width = 100;
mainImgWrapper.appendChild(appendChild);
secondImgWrapper.appendChild(appendChild);
document.body.appendChild(mainImgWrapper);
document.body.appendChild(secondImgWrapper);
两个 div 的不同子附加作品
var firstImgWrapper = document.createElement("DIV");
firstImgWrapper.style.width = 100+'px';
firstImgWrapper.style.height = 100+'px';
firstImgWrapper.style.background = 'red';
var secondImgWrapper = document.createElement("DIV");
secondImgWrapper.style.width = 100+'px';
secondImgWrapper.style.height = 100+'px';
secondImgWrapper.style.background = 'green';
var firstChildImg = document.createElement("IMG");
firstChildImg.src = 'https://images.pexels.com/photos/457702/pexels-photo-457702.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';
firstChildImg.width = 100;
var secondChildImg = document.createElement("IMG");
secondChildImg.src = 'https://images.pexels.com/photos/457702/pexels-photo-457702.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';
secondChildImg.width = 100;
firstImgWrapper.appendChild(firstChildImg);
secondImgWrapper.appendChild(secondChildImg);
document.body.appendChild(firstImgWrapper);
document.body.appendChild(secondImgWrapper);
推荐阅读
- assembly - x86 汇编字符串数组指针
- django - gunicorn.service:失败,结果为“退出代码”
- java - 在给定的示例中,使用 Random 类背后的逻辑是什么?
- wordpress - Kubernetes HTTP liveness 探测失败并出现“连接被拒绝”,即使 URL 没有它也可以工作
- android - 使用 Volley 下载 MP3 文件
- python - 如何在 Spyder 4.0 中移动面板?
- mysql - 超过1个表的SQL Innerjoin问题
- deployment - 使用 CLI 部署/启动/停止 JBOSS
- gitlab-ci-runner - GitLab CI/CD yml 缓存不会成功
- android - 如何在 Common Utils 中使用带有按钮的静态对话框