jQuery $.продлить не будет работать

Я пытаюсь создать плагин 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вариант. Вероятно, у меня так много ошибок, что я не могу думать. Но если кто-то знает, что происходит, это было бы очень ценно. Спасибо!

2 ответа

  1. … большинство вариантов не будет работать. Единственное, что делает это настройки.опция 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для каждого элемента селектора. Вероятно, вы не хотите этого делать.

  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: