jQuery $.extend 不起作用

Question

我正在尝试创建一个 jQuery 插件，但我运行遇到了很多问题。让我向您展示我的代码。

jQuery 插件：

//This plugin was created by Ben Allen. Website: http://thebenallen.net/
//This plugin uses the OpenDyslexic font. Get it at: http://opendyslexic.org/
(function($) {

$.fn.dyslexicSupport = function( options ) {

    var settings = $.extend({
        //Defualt settings in case you break it.
        //backgroundColor       : 'white',
        //backgroundColorActive : '#BDBDBD',
        //color                 : 'black',
        //colorActive           : '#00143E',
        //alert                 : false,
        //fontStyle             : 'normal'

        backgroundColor       : 'white',
        backgroundColorActive : '#BDBDBD',
        color                 : 'black',
        colorActive           : '#00143E',
        alert                 : false,
        fontStyle             : 'normal'
    }, options);

    return this.each(function() {

        $("head").prepend("<style type=\"text/css\">" + 
                            "@font-face {\n" +
                                "\tfont-family: \"opendyslexic\";\n" + 
                                "\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Regular.otf');\n" + 
                                "\tfont-weight: normal;\n" +
                                "\tfont-style: normal;\n" +
                            "}\n" + 
                        "</style>");

        $("head").prepend("<style type=\"text/css\">" + 
                            "@font-face {\n" +
                                "\tfont-family: \"opendyslexic\";\n" + 
                                "\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Italic.ttf');\n" + 
                                "\tfont-weight: normal;\n" +
                                "\tfont-style: italic;\n" +
                            "}\n" + 
                        "</style>");

        $("head").prepend("<style type=\"text/css\">" + 
                            "@font-face {\n" +
                                "\tfont-family: \"opendyslexic\";\n" + 
                                "\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Bold.ttf');\n" + 
                                "\tfont-weight: normal;\n" +
                                "\tfont-style: bold;\n" +
                            "}\n" + 
                        "</style>");

        $(this).css('font-family', 'opendyslexic')

        //if(settings.fontStyle) {

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

        //}

        if(settings.color) {

            $(this).css('color', color);

        }

        if(settings.backgroundColor) {

            $(this).css('background-color', settings.backgroundColor);

        }

        $(this).mouseenter(function() {

            if(settings.backgroundColorActive) {

                $(this).css('background-color', settings.backgroundColorActive);

            }

        });

        $(this).mouseleave(function() {

            if(settings.backgroundColor) {

                $(this).css('background-color', settings.backgroundColor);

            }

        });
        $(this).mouseenter(function() {

            if(settings.colorActive) {

                $(this).css('color', settings.colorActive);

            }

        });

        $(this).mouseleave(function() {

            if(settings.color) {

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

        });
            if(settings.alert == true) {

                $('document').ready(function() {

                    alert('This website is Dyslexia friendly.');

                });

            }

            else {

                return true;

            }

        $('#alertClose').click(function() {

            $('#alertDiv').hide()

        });
    });

}

}(jQuery));

我在 HTML 中如何称呼它：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="jquery.dyslexicSupport.js" type="text/javascript"></script>
    <script type="text/javascript">
        $('document').ready(function() {

            $('body').dyslexicSupport({
                backgroundColor       : 'white',
                backgroundColorActive : 'black',
                color                 : 'red',
                colorActive           : 'blue',
                alert                 : true,
                fontStyle             : 'italic'
            });

        });
    </script>
</head>

好的，让我解释一下我遇到的问题。我调用它时的参数不会覆盖 .js 文件中设置的默认参数。另一个问题是大多数选项都不起作用。唯一能做到的是 settings.fontStyle 选项。我可能还有很多我想不到的错误。但是，如果有人知道发生了什么，将不胜感激。谢谢！

Answer 1

... most options won't work. The only one that does is the settings.fontStyle option. ...

那是因为您的默认选项和您发送给插件的选项是相同的，除了 fontStyle:

// Plugin settings
{
    backgroundColor       : 'white',
    backgroundColorActive : '#BDBDBD',
    color                 : 'black',
    colorActive           : '#00143E',
    alert                 : false,
    fontStyle             : 'italic'
}

// Code settings
{
    backgroundColor       : 'white',
    backgroundColorActive : '#BDBDBD',
    color                 : 'black',
    colorActive           : '#00143E',
    alert                 : true,            // Only these two
    fontStyle             : 'normal'         // are different!
}

更新：

$.extend() 将修改作为参数传递给它的第一个对象。所以，你应该这样称呼它：

var settings = {
    backgroundColor       : 'white',
    backgroundColorActive : '#BDBDBD',
    color                 : 'black',
    colorActive           : '#00143E',
    alert                 : false,
    fontStyle             : 'normal'
};
$.extend(settings, options);

您的代码还有其他问题。例如：您要为选择器中的每个元素向 head 添加多个样式。可能你不想那样做。

Answer 2

如果您查看控制台，您会发现错误位于

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

应该是

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

否则错误导致以下所有代码失败

查看固定演示

//This plugin was created by Ben Allen. Website: http://thebenallen.net/
//This plugin uses the OpenDyslexic font. Get it at: http://opendyslexic.org/
(function($) {

  $("head").prepend("<style type=\"text/css\">" +
        "@font-face {\n" +
        "\tfont-family: \"opendyslexic\";\n" +
        "\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Regular.otf');\n" +
        "\tfont-weight: normal;\n" +
        "\tfont-style: normal;\n" +
        "}\n" +
        "</style>");

      $("head").prepend("<style type=\"text/css\">" +
        "@font-face {\n" +
        "\tfont-family: \"opendyslexic\";\n" +
        "\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Italic.ttf');\n" +
        "\tfont-weight: normal;\n" +
        "\tfont-style: italic;\n" +
        "}\n" +
        "</style>");

      $("head").prepend("<style type=\"text/css\">" +
        "@font-face {\n" +
        "\tfont-family: \"opendyslexic\";\n" +
        "\tsrc: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Bold.ttf');\n" +
        "\tfont-weight: normal;\n" +
        "\tfont-style: bold;\n" +
        "}\n" +
        "</style>");
  
  $.fn.dyslexicSupport = function(options) {

    var settings = $.extend({
      //Defualt settings in case you break it.
      //backgroundColor       : 'white',
      //backgroundColorActive : '#BDBDBD',
      //color                 : 'black',
      //colorActive           : '#00143E',
      //alert                 : false,
      //fontStyle             : 'normal'

      backgroundColor: 'white',
      backgroundColorActive: '#BDBDBD',
      color: 'black',
      colorActive: '#00143E',
      alert: false,
      fontStyle: 'normal'
    }, options);

    return this.each(function() {

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

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

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

      $(this).mouseenter(function() {
        if (settings.backgroundColorActive) {
          $(this).css('background-color', settings.backgroundColorActive);
        }
      });

      $(this).mouseleave(function() {
        if (settings.backgroundColor) {
          $(this).css('background-color', settings.backgroundColor);
        }
      });
      
      $(this).mouseenter(function() {
        if (settings.colorActive) {
          $(this).css('color', settings.colorActive);
        }
      });

      $(this).mouseleave(function() {
        if (settings.color) {
          $(this).css('color', settings.color);
        }
      });
      
      if (settings.alert == true) {
        $(document).ready(function() {
          alert('This website is Dyslexia friendly.');
        });
      } else {
        return true;
      }

      $('#alertClose').click(function() {
        $('#alertDiv').hide()
      });
      
    });
  }
}(jQuery));

$(document).ready(function() {

  $('body').dyslexicSupport({
    backgroundColor: 'white',
    backgroundColorActive: 'black',
    color: 'red',
    colorActive: 'blue',
    alert: true,
    fontStyle: 'italic'
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

How I call it in the HTML:

jQuery $.extend 不起作用

jQuery $.extend won't work

javascript

jquery

jquery-plugins