这是我第一次在这里问,是的,这意味着我已经筋疲力尽了。我目前正在研究一个脚本,该脚本可以动态地修改元素的css属性。我在脚本中更改两个元素的css属性时遇到问题(我在示例中放置了两个元素),而不仅仅是其中一个元素。所以这是怎么发生的:
这是我所做的功能:
打开上下文菜单(使用中键)
(function ( $ ) {
$.fn.openMenu = function(opt) {
console.log(x+" "+y);
$('#contextmenu').css( 'position', 'absolute' );
$('#contextmenu').css( 'top', y );
$('#contextmenu').css( 'left', x );
$('#contextmenu').show();
$('#close_context').on("click", function(){
$('#contextmenu').hide();
});
$("#addContent").on("click", function(){
$('#contextmenu').hide();
});
$('#deleteElement').on("click", function(){
element.remove();
$('#contextmenu').hide();
});
$('#contextmenu').unbind();
return this;
};
}( jQuery ));
更改CSS的实际代码
(function ( $ ) {
$.fn.modifyCssElement = function() {
var element = this;
console.log(this.attr('id'));
$('#border').val(element.css("border"));
$('#padding').val(element.css("padding"));
$('#z-index').val(element.css("z-index"));
$('#border-radius').val(element.css("border-radius"));
var elembg = this.css('background');
$("#padding").focusout( function(){
element.css('padding', "");
element.css('padding', $(this).val());
});
$("#border-radius").change( function(){
element.css('-webkit-border-radius', "");
element.css('-moz-border-radius', "");
element.css('border-radius', "");
element.css('-webkit-border-radius', $(this).val());
element.css('-moz-border-radius', $(this).val());
element.css('-moz-border-radius', $(this).val());
});
$("#border").change( function(){
element.css('border', "");
element.css('border', $(this).val());
console.log(element.attr('id'));
});
$("#z-index").change( function(){
element.css('z-index', "");
element.css('z-index', $(this).val());
});
return this;
};
}( jQuery ));
这是脚本的小提琴:
您需要使用该off
函数来删除函数中以前的设置处理程序modifyCssElement
。
例如
$("#padding").off('focusout').focusout( function(){
...
$("#border-radius").off('change').change( function(){
这是因为您正在为上下文菜单重复使用相同的HTML元素。当您调用时focusout
,etc不会覆盖以前的处理程序。每个调用都会向HTML元素添加一个侦听器处理程序,要停止此操作,您必须显式删除以前的处理程序(使用off
),否则将触发所有先前添加的处理程序。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句