我正在建立一个Wordpress网站,以便您可以通过为插入的图像分配一个类,通过CKEditor插入具有视差的全角图像。我编写的脚本将找到的图像替换为div,并将替换后的图像的源用作div的背景。其余的由CSS完成。我的问题是,到目前为止,我只能使它与具有该类的第一张图片一起使用。
我知道我的代码在哪里崩溃了-那是我将图像替换为div的时候。
这是我的代码:
if (document.getElementsByClassName('fullwidth-image').length > 0) {
let pictures = document.getElementsByClassName('fullwidth-image');
Array.prototype.forEach.call(pictures, function(e){
let imgUrl = e.src,
imgWrapper = document.createElement('div');
imgWrapper.classList.add('fullwidth-container');
imgWrapper.style.backgroundImage = 'url(' + imgUrl + ')';
e.replaceWith(imgWrapper);
});
}
如果我注释掉
e.replaceWith(imgWrapper);
然后
console.log(e);
根据需要输出页面上的所有图像。但是,在代码中时,仅输出具有class =“ fullwidth-image”的第一张图像。我该怎么写呢?
答案 0 :(得分:0)
从getElementsByClassName
返回的值是一个 live HTMLCollection
,这意味着当基础文档发生更改时,它会自动更新。
因此,只要替换其中的一个元素,您通过此“类似数组”的对象的迭代就会受到影响。
您可以简单地从集合中的元素创建一个普通数组,然后对其进行迭代(迭代时不会弄乱)。
let pictureElements = document.getElementsByClassName('fullwidth-image');
const pictures = [...pictureElements]; // Uses object spread syntax
pictures.forEach(function(e) {
let imgUrl = e.src,
imgWrapper = document.createElement('div');
imgWrapper.classList.add('fullwidth-container');
imgWrapper.style.backgroundImage = 'url(' + imgUrl + ')';
e.replaceWith(imgWrapper);
});
div.fullwidth-container {
width: 100%;
height: 50px;
border: 1px solid black;
}
<img class="fullwidth-image" id="img1" src="" alt="No Image 1"/>
<img class="fullwidth-image" id="img2" src="" alt="No Image 2"/>
<img class="fullwidth-image" id="img3" src="" alt="No Image 3"/>
<img class="fullwidth-image" id="img4" src="" alt="No Image 4"/>
<img class="fullwidth-image" id="img5" src="" alt="No Image 5"/>
请注意,所有替换的元素应为带有黑色边框的<div>
。
答案 1 :(得分:0)
尝试使用querySelectorAll而不是getElementsByClassName,它对我有用