javascript - 未捕获的类型错误 : Cannot read property 'cat' of undefined (this. dataset.cat)

Question

解决方案: this.dataset.cat 变为 this.getAttribute("cat") 和 变为

<小时/>

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

$(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') );

      }

  });