Javascript 无法读取属性'；getAttribute'；未定义的

我读了几乎所有关于stackoverflow的文章，标题都差不多，但我找不到解决这个问题的办法。我正在使用Photosweep js插件制作一个包含照片的

图库

。我遇到了一个问题，我下载了

Github

example（），在dist文件夹中打开了index.html文件，它运行良好。我复制了我网站上的所有代码，但不起作用，每次单击图库时，它都会在控制台上显示我：

Cannot read property 'getAttribute' of undefined

代码显示在此文件的第25行：

您可以在此处看到出现错误的页面：

图库的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>

第一画廊：
图片说明1
图片说明2
图片说明3
图片说明4
第二画廊：
图片说明2.1
图片说明2.2
图片说明2.3

我怎样才能修好它

---

谢谢。

问题在于p html元素，因为它在您的子列表中。请将其删除或尝试以下操作：

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);
}

if（linkEl.tagName=='A'| | linkEl.tagName=='A'）{
size=linkEl.getAttribute（'data-size'）.split（'x'）；
//创建幻灯片对象
项目={
src:linkEl.getAttribute（'href'），
w:parseInt（大小[0]，10），
h:parseInt（大小[1]，10）
};
如果（figureEl.children.length>1）{
//内容
item.title=figureEl.children[1].innerHTML；
}
如果（linkEl.childrence.length>0）{
//解决方案是删除Wordpress在Wordpress HTML编辑器上自动生成的
p
标记。
我在网页上的代码中没有看到错误：在上一个
和
之间的代码中有一个流氓
（在您的页面上，而不是在您发布的代码中）浏览器试图纠正这一点，这会弄乱你的插件。单击图库的任何图像，你都会在控制台上看到错误。@Ivar Wordpress all me that和
默认情况下，在文本编辑器上，即使我使用HTML编辑器也很困难。但我认为如果不解决问题，是JS问题，而不是HTML问题problem@PedroCorcheroMurga我还在看如果我删除Wordpress在我的网站上生成的
代码，它就可以工作了，那么我如何避免Wordpress在html编辑器中将我添加到我的html代码上呢？谢谢。通过使用我发布的代码..m，你试过了吗，基本上我只需检查标记名是否等于（链接）@PedroCorcheroMurga成功了吗？好吧，我修复了它，删除了空白，谢谢！@PedroCorcheroMurga很高兴你这么做了，如果上面或其他没有帮助，你可以发布你的解决方案