Question

我创建了一个灯箱，并使用javascript动态地将图像添加到灯箱。我遇到的问题是，当我向页面添加图像然后我向该图像添加一个类时，我似乎无法让滑块部分工作。我把它缩小到几个不同的东西，但这是一个大问题。从我在运行代码时所看到的，它告诉我没有名为demo的类a.k.a无法读取未定义的属性'className'。这与最后一行的showSlides（）函数有关。我知道问题在于那段代码中的点。所以我在想这里发生的事情是我的其他函数在我的图像被创建并添加到页面之前被调用，因此我得到了错误。所以我已经尝试了很多方法来完成这项工作，我似乎无法想出一个解决方案。有没有办法让这项工作或我需要废弃这个灯箱并重新开始。

mymap.on('popupopen', function(e) {
var marker = e.popup._content;
let i;

for (var c in markerData.Markers[0]) {
            for (let h = 0; h < markerData.Markers[0][c][i]["Images"][1]['Regional Images'].length; h++) {
                let img = document.createElement('img');
                img.src = markerData.Markers[0][c][i]["Images"][1]['Regional Images'][h];
                img.className = "demo";
                document.getElementById('column').appendChild(img);
}
        }
        else {}
    }
}
});

var slideIndex = 1;
showSlides(slideIndex);

let prev = document.getElementsByClassName('prev');
let next = document.getElementsByClassName('next');
prev[0].addEventListener('click', function() { plusSlides(-1); } ); 
next[0].addEventListener('click', function() { plusSlides(1); });

function plusSlides(n) {
console.log('got here')
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}


function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
    slideIndex = 1
}
if (n < 1) {
    slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}

我做了下面列出的第一个更改，但这并没有解决我遇到的问题。我仍然得到相同的错误，无法读取未定义的属性'className'

通过appendChild

0 个答案: