Javascript jquery插件出错

Javascript jquery插件出错,javascript,jquery,html,css,Javascript,Jquery,Html,Css,作为初学者,我的自定义插件出现了一个错误。我正在尝试更改页面上div的属性 这是我的JavaScript代码: (function($) { $.fn.changeDiv = function( options ) { var settings = $.extend({ // These are the defaults. text : 'Hello, World!', color: "#556b2f", backgro

作为初学者,我的自定义插件出现了一个错误。我正在尝试更改页面上div的属性

这是我的JavaScript代码:

(function($) {
$.fn.changeDiv = function( options ) {

    var settings = $.extend({
        // These are the defaults.
        text  : 'Hello, World!',
        color: "#556b2f",
        backgroundColor: "white",
        borderColor : "white",
        borderWeight: "1px;",
        fontWeight   : 'bold',
        fontStyle   : 'Trebuchet MS, Callibri, Sans-Serif',
        fontSize  : '18px',
        position: "center",
        fl : "auto",
        wt: "auto",
        ht: "auto",
        mRight: "auto",
        mLeft: "auto",
        complete : null
    }, options );
            return this.each( function() {

         $(this).text( settings.text );

        if ( settings.color ) {
            $(this).css( 'color', settings.color );
        }

        if ( settings.fontStyle ) {
            $(this).css( 'font-style', settings.fontStyle );
        }

        if ( settings.fontWeight ) {
            $(this).css( 'font-weight', settings.fontWeight );
        }

        if ( settings.fontSize ) {
            $(this).css( 'font-size', settings.fontSize );
        }

        if ( settings.wt ) {
            $(this).css( 'width', settings.wt );
        }

        if ( settings.ht ) {
            $(this).css( 'height', settings.ht );
        }

        if ( settings.position ) {
            $(this).css( 'text-align', settings.position );
        }

        if ( settings.fl ) {
            $(this).css( 'float', settings.fl );
        }

        if ( settings.mRight ) {
            $(this).css( 'margin-right', settings.mRight );
        }

        if ( settings.mLeft ) {
            $(this).css( 'margin-left', settings.mLeft );
        }

        if ( $.isFunction( settings.complete ) ) {
            settings.complete.call( this );
        }
  });
};
我在调用函数时使用此选项:

$('#header').changeDiv({
text: 'This is the header div',
    fontStyle: 'Verdana, Arial, Helvetica, Sans-serif',
fontWeight: 'bold',
backgroundColor: '#406481',
fontSize: '30px',
ht: "50px",
position: "center",
complete    : function() { $(this).easeIn("slow",1500); }
});
我得到的结果是只有文本“This is The header div”为绿色,中间对齐。如果我对菜单应用相同的changeDiv函数,则不会发生任何事情。如果我将返回函数更改为以下内容:

return this.css({
    color: settings.color,
    backgroundColor: settings.backgroundColor,
    borderColor: settings.backgroundColor,
    borderWeight: settings.borderWeight,
fontWeight: settings.fontWeight,
fontStyle: settings.fontStyle,
fontSize: settings.fontSize,
position: settings.position,
fl: settings.fl,
wt: settings.wt,
ht: settings.ht,
mRight:settings.mRight,
mLeft: settings.mLeft
});
我可以在FireBug中看到样式应用于div,但是默认文本没有改变


救命啊

我认为解决方案在于您尝试编写的
css
fontStyle
必须是
font-family

试试这个:

$(this).css( 'font-family', settings.fontStyle );
编辑

问题已经解决了:其他人试图找到答案的一个有效例子:

在第1行中添加了$,并对原始代码进行了一些更改


您必须将$.fn.changeDiv包含在



    $(function($) {


所以你需要$character。(在你的第一行)当你称它为chageDiv时,也使用这个定义。这对我来说很有用。

这并不能回答问题。我想用标题、菜单或其他div中的内容替换Hello World文本B。对不起,我没有收到!如果我正确理解它,它在#header上工作,但在其他div上不工作?是的,这很奇怪。我还添加了.html(settings.text).settings.complete。调用(此)返回代码,它在header中显示了我想要的文本。其他div不起作用;js,它现在可以工作了。