我不明白为什么这个脚本在Firefox中不起作用
- 隐藏了父块
- 如果该脚本没有加载图像的SRC,则
- 。除了Firefox
之外,所有浏览器都可以使用这是Firefox错误还是脚本问题?如果问题出现在脚本中,我该如何使其在Firefox中起作用?
PS 。在此站点上看不可见此错误。尝试在本地(不使用Internet)在PC上创建 index.html 文件并在此处粘贴此代码,然后在Firefox中查看结果。
let images = document.querySelectorAll('.Parent_block > .Child_Img');
images.forEach(function(e) {
e.onerror = function() {
e.closest('.Parent_block').style.display = 'none';
};
});
.Parent_block {
width: 30%;
margin: 0;
padding: 0;
margin-left: 10px;
margin-top: 10px;
border: 1px solid black;
display: inline-block;
height: 250px;
}
img {
height: inherit;
width: 100%;
}
<figure class="Parent_block">
<img class="Child_Img" src="">
<figcaption class="Img_text">1</figcaption>
</figure>
<figure class="Parent_block">
<img class="Child_Img" src="https://i.ibb.co/kyXhZmB/photo-2021-11-18-14-40-18.jpg">
<figcaption class="Img_text">2</figcaption>
</figure>
<figure class="Parent_block">
<img class="Child_Img" src="">
<figcaption class="Img_text">3</figcaption>
</figure>
- This script hides the parent block
- if it doesn't have the src of the image loaded.
- Works in all browsers except Firefox
Is this a Firefox bug or a script issue? If the problem is in the script, how can I make it work in Firefox?
P.S. This error is not visible on this site. Try creating an index.html file locally(without using the internet) on your PC and paste this code there, then view the result in Firefox.
let images = document.querySelectorAll('.Parent_block > .Child_Img');
images.forEach(function(e) {
e.onerror = function() {
e.closest('.Parent_block').style.display = 'none';
};
});
.Parent_block {
width: 30%;
margin: 0;
padding: 0;
margin-left: 10px;
margin-top: 10px;
border: 1px solid black;
display: inline-block;
height: 250px;
}
img {
height: inherit;
width: 100%;
}
<figure class="Parent_block">
<img class="Child_Img" src="">
<figcaption class="Img_text">1</figcaption>
</figure>
<figure class="Parent_block">
<img class="Child_Img" src="https://i.ibb.co/kyXhZmB/photo-2021-11-18-14-40-18.jpg">
<figcaption class="Img_text">2</figcaption>
</figure>
<figure class="Parent_block">
<img class="Child_Img" src="">
<figcaption class="Img_text">3</figcaption>
</figure>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论