文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery $.extend不能工作

问jQuery $.extend不能工作
EN

Stack Overflow用户

提问于 2016-05-05 23:04:43

回答 2查看 147关注 0票数 0

我正在尝试创建一个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选项。我可能有更多的错误，我想不起来。但如果有人知道发生了什么，那将是非常感激的。谢谢!

javascript

jquery

jquery-plugins

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-05-05 23:40:38

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

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:

票数 0

Stack Overflow用户

发布于 2016-05-05 23:12:12

..。大多数选择都行不通。唯一这样做的是settings.fontStyle选项。..。

这是因为除了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中添加几个样式。可能你不想这么做。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37061689

复制

相似问题

问jQuery $.extend不能工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery $.extend不能工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery $.extend不能工作
EN