Question

我尝试在图库中添加toggleImage的功能，并检查其中一个答案中提供的this主题和the code，但在控制台中获得了Uncaught TypeError: Cannot read property 'attr' of undefined。

HTML：

<div id="gallery">
   <figure>
     <img data-src="/assets/images/small/one.jpg">
     <a data-href="/assets/images/one.jpg">
   </figure>
   <figure>
     <img data-src="/assets/images/small/two.jpg">
     <a data-href="/assets/images/two.jpg">
   </figure>
   <figure>
     <img data-src="/assets/images/small/three.jpg">
     <a data-href="/assets/images/three.jpg">
   </figure>
</div>

  <div class="modal">
    <div class="">
      <img class="modal__image" src="">
    </div>
    <div class="modal__close">X</div>
  </div>

有效的JavaScript：

import $ from 'jquery'

class ToggleImage {
  constructor() {
    this.thumbnail = $('#gallery img')
    this.modalImage = $('.modal__image')
    this.passHref()
  }

  passHref() {
    this.thumbnail.click(e => {
      const href = $(e.target).siblings().attr('data-href')
      this.modalImage.attr('src', href)
      e.preventDefault
      return false
    })
  }  
}

const toggleImage = new ToggleImage()

如您所见，var href = $(this)已更改为$(e.target).siblings()。在此更改之前，我尝试仅使用this或仅e.target使用getAttribute（）和非箭头函数，或者在行const that = this之前添加const href并使用{{ 1}}相反，但没有一个工作。我可以知道为什么吗？

到目前为止，click事件与动作代码捆绑在一起。但是因为我希望将动作与事件分开，所以$（e.target）不适合这种情况。

that

Answer 1

为了进一步澄清这些评论，您可以在这里看到this在正常函数和箭头函数中的工作原理。

console.log('global scope this: ' + this);

$('button').click(e => console.log('arrow function this: ' + this));

$('button').click(function(e) { 
  console.log('function this: ' + this); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>

为了澄清，箭头函数中的this与箭头函数外的this相同。在上面的代码中，父作用域是全局的，其中this未定义。

Answer 2

在你的组件中，'this'是'ToggleImage'的对象。你不能使用$（this）因为这里js将'$（this）'理解为'$（ToggleImage）'

ES6模块中的`this`和$（this）未定义

2 个答案: