Uncaught TypeError: Cannot read property 'cat' of undefined (this.dataset.cat)

Question

解决方法：this.dataset.cat 变成了 this.getAttribute("cat") 而 <svg data-cat="1"> 变成了 <svg cat="1">

我在网页上有这个基本的图像查看器，几个月前我把它放上去时它工作正常，但现在由于某种原因我去尝试使用它，但它现在抛出错误。不确定我对此做了什么。

$(document).ready(function() {
  var arrows = document.getElementsByClassName("arrow");
  for (var i = 0; i < arrows.length; i++) {
    arrows[i].addEventListener("click", function(event) {
      $(".slide").finish(); //Instantly finishes slide animation
      if (this.className.baseVal == "arrow right") {
        scrollNext(this.dataset.cat); //ERROR
      } else {
        scrollPrevious(this.dataset.cat); //ERROR
      }
    });
  }
});

<svg id="c1Left" class="arrow left" data-cat="1">
  <polygon points="0,50 50,0 50,15 15,50 50,85 50,100">
</svg>
<img id="c1Previous" class="slide previous" />
<img id="c1Current" class="slide current" src="folder/subfolder/0.png" />
<img id="c1Next" class="slide next" src="folder/subfolder/1.png" />
<svg id="c1Right" class="arrow right" data-cat="1">
  <polygon points="50,50 0,0 0,15 35,50 0,85 0,100">
</svg>

注释行错误抛出：

未捕获类型错误：无法读取未定义的属性 'cat'

这会让我相信它试图定义点击事件并在加载元素之前分配 dataset.id 但这不应该发生，因为它应该只在文档完全加载后初始化，对吗？

Answer 1

将其更改为使用 jQuery，如下所示：

  $(".arrow").on("click", function(event) {

      $(".slide").finish();

      if ( $(this).hasClass('right') ){

        scrollNext( $(this).data('cat') );

      } else {

        scrollPrevious( $(this).data('cat') );

      }

  });

Uncaught TypeError: Cannot read property 'cat' of undefined (this.dataset.cat)

Uncaught TypeError: Cannot read property 'cat' of undefined (this.dataset.cat)

javascript

jquery

element

dataset

typeerror