我正在编写一个需要维护状态的jQuery
插件。页面上将有多个实例,但每个实例将具有与数据库中的键相关联的不同数据。我试图在jQuery网站上使用这个例子作为我的起点,但遇到了一些困难。这里'hid'和'hnid'是我感兴趣的关键值。在制作中我将通过选项传递它们。但我的问题是,当我点击保存按钮并运行'保存'方法时,如何获取我的数据键,隐藏和隐藏?现在,当我运行代码时,我得到数据为空。
(function($) {
var settings = {
'background-color': 'blue'
};
var saveData = function() {
var data = $(this).data('inknote');// now this refers to save button so has no 'data' associated with it.
console.log('data', data);
}
var methods = {
init: function(options) {
return this.each(function() {
if (options) {
$.extend(settings, options);
}
var $this = $(this),
data = $this.data('inknote');
// If the plugin hasn't been initialized yet
if (!data) {
var startData = {
target: $this,
hid: 1,
hnid: 2
};
$this.data('inknote', startData);
}
var $messageDiv = $('<div>').addClass('messages').html(' ');
/* am I calling the save method properly here ?*/
var $saveButton = $('<input>').attr('type', 'button').attr('value', 'Save').bind('click', function() { methods['save'].apply(this); });
var $printButton = $('<input>').attr('type', 'button').attr('value', 'Print').bind('click', function() { methods['print'].apply(this); });
var $lockStatus = $('<div>').addClass('lock').addClass('unlocked').html(' ');
$this.append($messageDiv).append($saveButton).append($printButton).append($lockStatus);
});
},
save: function(el) {
return $(this).each(function() {
saveData(this);
});
},
print: function(el) {
return false;
}
};
$.fn.inknote = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.inknote');
}
};
})(jQuery);