不能在 Object Literal 中使用 jQuery 函数

Question

我正在尝试了解对象文字模式在 Javascript 中的工作原理。在我的一个项目中，我卡在了使用某些 jQuery 函数的部分。为了这个问题，我建立了一个小例子。

我希望有人能给我一些很棒的提示。

Javascript: 创建一个对象字面量，并调用 init() 方法。

HTML: 一些带有删除按钮的部分。单击时，我想显示一个警报，其中关联的 ID 作为数据属性从 DOM 中提取。但是它有一部分失败了，javascript 不知道 .data 在该特定函数中的含义。

谢谢...！

var test = {
  init: function() {
    this.dom();
    this.events();
  },
  dom: function() {
    this.$contentbox = $('.box');
    this.$buttons = this.$contentbox.find('a');
  },
  events: function() {
    this.$buttons.on('click', this.removeDiv);
  },
  removeDiv: function(event) {
    event.preventDefault();
    var div = this.closest('.removeMe'); // This works perfectly
    var divID = div.data('id'); // Crashing -> Uncaught TypeError: div.data is not a function
    alert('Product ' + divID + ' is to be deleted...');
  }
}

test.init();

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

<div class="box">
  <div class="content">
    Hi there! Click X to delete item :)
  </div>
  <div data-id="6" class="removeMe">
    Product 6 <a href="#">(X)</a>
  </div>
  <div data-id="7" class="removeMe">
    Product 7 <a href="#">(X)</a>
  </div>
  <div data-id="8" class="removeMe">
    Product 8 <a href="#">(X)</a>
  </div>
</div>

Answer 1

div 是普通的 HTMLDivElment 而不是 jQuery 对象，因此没有 .data() 方法，而是：

var divID = $(div).data('id')

不能在 Object Literal 中使用 jQuery 函数

Can't use jQuery function inside Object Literal

javascript

jquery

html

design-patterns

object-literal