我为不同 div 的上下文菜单开发了一个插件
<div>
<div class='first'>some data</div>
<div class='second'>some data</div>
<div class='third'>some data</div>
<div class='fourth'>some data</div>
</div>
和菜单显示为上下文菜单
<ul id='cmenu'>
<li id='menuItem1'>Item1</li>
<li id='menuItem2'>Item1</li>
<li id='menuItem3'>Item1</li>
<li id='menuItem4'>Item1</li>
<li id='menuItem5'>Item1</li>
<li id='menuItem6'>Item1</li>
</ul>
我的插件是。
该插件的工作原理是更改每个部门的菜单项列表，并且菜单项的回调也发生了变化。
(function($) {
$.fn.cnxtmenu = function(options) {
var defaults = {
'menuid' : '',
item1 : function() {
},
item2 : function() {
},
item3 : function() {
},
item4 : function() {
},
item5 : function() {
},
item6 : function() {
},
}, opt = $.extend({}, defaults, options);
console.log(opt);
var mid = '#'+opt.menuid, seldiv;
this.live({
"contextmenu" : function(e) {
//console.log(this);
seldiv = $(this);
if ($(this).hasClass('first')) {
//change the menu list
} else if($(this).hasClass('second')){
// change the menu list to display different items
}
else if($(this).hasClass('file-list')){
//differ list
}
else if($(this).hasClass('dstore_file-list')){
//differ menu list
}
$(mid).css({
top : e.pageY + 'px',
left : e.pageX + 'px'
}).show();
return false;
}
});
$(mid).children('li').unbind('click').click(function(e) {
e.stopPropagation();
e.preventDefault();
//console.log(file + "at switch");
switch(this.id) {
case 'menuItem1':
opt.item1(this, seldiv);
break;
case 'menuItem2':
opt.item2(this, seldiv);
break;
case 'menuItem3':
opt.item3(this, seldiv);
break;
case 'menuItem4':
opt.item4(this, seldiv);
break;
case 'menuItem5':
opt.item5(this, seldiv);
break;
case 'menuItem6':
opt.item6(this, seldiv);
break;
}
$(mid).hide();
return false;
});
$(mid).click(function() {
$(mid).hide();
});
$(document).click(function() {
$(mid).hide();
});
}
})(jQuery);
我正在像这样使用这个插件。
$('.first').cnxtmenu({menuid:'cmenu',
item1:some callbacks
...});
为所有三个 div 分配不同的回调。
我的问题是选择器的回调没有区别。并且回调被触发了很多次。
请帮我看看我的代码有什么问题
提前致谢。