Question

我已经编写了一个小插件来更改文本大小，但它似乎无法正常工作。 $（ '＃mypara'）changeTextSize（ '30PX'）。不会将大小设置为30px，而是设置为10px

jquery.myPlugin.js

jQuery.fn.changeTextSize = function(size){
alert(size);    //shows 30px        

var config = {
    'size' : '10px'
};
if(size) {
    $.extend(config,size);
}

alert(config.size); //shows 10px

return $(this).each(function() {
    $(this).css('font-size',config.size);
});

};

HTML

<script type = "text/javascript" src="jquery-1.7.1.js"></script>
<script type = "text/javascript" src="jquery.myPlugin.js"></script>

<script>
$(document).ready(function() {
    $('#mypara').changeTextSize('30px');    
}); 
</script>

</head>
<body>
<p id="mypara">dsfdsfdsf</p>

</body>

Answer 1

extend函数用于合并对象。您正尝试将字符串size合并到对象文字config中。您需要将一个对象作为参数传递给您的插件：

$('#mypara').changeTextSize({
    size: '30px'
});

这是working example。

或者，如果这是唯一的参数并且不会有更多选项，那么可能更容易忘记使用extend，并且只做这样的事情：

jQuery.fn.changeTextSize = function(size){ 
    return this.css('font-size', size || "10px");
};

注意我是如何删除each的，因为不需要它（默认情况下，大多数jQuery方法都适用于匹配集中的每个元素），并且您也不需要传递{{ 1}}到this，因为它已经是jQuery的实例。

这是working example的那个。

$ .extend功能似乎无法正常工作

jquery.myPlugin.js

HTML

1 个答案: