我正在尝试创建一个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选项。我可能有更多错误，我无法想到。但是，如果有人知道发生了什么，将不胜感激。谢谢！
答案 0 :(得分：0)
......大多数选项都无法奏效。唯一能做的就是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添加多个样式。也许，你不想这样做。
答案 1 :(得分：0)
如果您查看控制台，您将发现错误，即
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: