不能在 Object Literal 中使用 jQuery 函数

Question

我正在尝试学习对象文字模式在 Javascript 中是如何工作的。 在我的一个项目中，我被困在我使用一些 jQuery 函数的部分。 为了这个问题，我建立了一个小例子。

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

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

HTML：一些带有删除按钮的部分。 单击时，我想显示一个带有从 DOM 中提取为数据属性的关联 id 的警报。 但是有一部分失败了，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')