[英]Cannot read property 'getAttribute' of undefined
I readed almost all the post on stackoverflow with similar title but i can't find the solution of this problem.我阅读了几乎所有类似标题的 stackoverflow 帖子,但我找不到解决此问题的方法。 I'm using the https://photoswipe.com/ Photoswipe js plugin to make a
gallery with photos
.我正在使用https://photoswipe.com/Photoswipe js 插件制作
gallery with photos
的gallery with photos
。 I have a problem, I downloaded the Github
example ( https://codepen.io/dimsemenov/pen/ZYbPJM ) and on the dist folder I opened the index.html file and it's works well.我有一个问题,我下载了
Github
示例( https://codepen.io/dimsemenov/pen/ZYbPJM )并在 dist 文件夹中打开了 index.html 文件,它运行良好。 I copied all the code on my site and don't work, It shows me on console each time I click on the gallery :我复制了我网站上的所有代码但不起作用,每次单击图库时它都会在控制台上显示:
Cannot read property 'getAttribute' of undefined
The code shows on the line 25 of this file: https://www.fundacioncb.es/wp-content/themes/construction/js/script.js代码显示在该文件的第 25 行: https : //www.fundacioncb.es/wp-content/themes/construction/js/script.js
You can see the page with the error here: https://www.fundacioncb.es/cesion-espacio-badajoz/您可以在此处查看错误页面: https : //www.fundacioncb.es/cesion-espacio-badajoz/
HTML Structure of the gallery:画廊的 HTML 结构:
<h2>First gallery:</h2>
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm3.staticflickr.com/2567/5697107145_a4c2eaa0cd_o.jpg" itemprop="contentUrl" data-size="1024x1024">
<img src="https://farm3.staticflickr.com/2567/5697107145_3c27ff3cd1_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image caption 1</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" itemprop="contentUrl" data-size="964x1024">
</a>
<figcaption itemprop="caption description">Image caption 2</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg" itemprop="contentUrl" data-size="1024x683">
</a>
<figcaption itemprop="caption description">Image caption 3</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_b.jpg" itemprop="contentUrl" data-size="1024x768">
</a>
<figcaption itemprop="caption description">Image caption 4</figcaption>
</figure>
</div>
<h2>Second gallery:</h2>
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" itemprop="contentUrl" data-size="964x1024">
<img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image caption 2.1</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg" itemprop="contentUrl" data-size="1024x683">
<img src="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image caption 2.2</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_b.jpg" itemprop="contentUrl" data-size="1024x768">
<img src="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image caption 2.3</figcaption>
</figure>
</div>
How Can i fix it?我该如何解决?
Thanks.谢谢。
The problem is the p html element, because it is in you children list.问题是 p html 元素,因为它在你的孩子列表中。 Either remove it or try this:
要么删除它,要么试试这个:
if(linkEl.tagName == 'A' || linkEl.tagName == 'a') {
size = linkEl.getAttribute('data-size').split('x');
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
if(figureEl.children.length > 1) {
// <figcaption> content
item.title = figureEl.children[1].innerHTML;
}
if(linkEl.children.length > 0) {
// <img> thumbnail element, retrieving thumbnail url
item.msrc = linkEl.children[0].getAttribute('src');
}
item.el = figureEl; // save link to element for getThumbBoundsFn
items.push(item);
}
解决方案是删除 Wordpress 在 Wordpress HTML 编辑器上自动生成的p
标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.