Question

我使用以下代码创建具有弹出功能的图像滑块以显示缩放版本。在这里，对于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。我找不到代码的任何问题，或者在执行环境中都找不到。我可能会想念一些自己看不见的东西。

Answer 1

我在这里找到了问题。对于HTML标准，您不能两次附加html节点。如果这样做，它将仅执行最后一次尝试。原因是如果您不小心将一个ID添加到html节点，并且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);

循环内的appendChild问题

1 个答案: