Question

我对网页设计很陌生，我正在努力理解以下jQuery代码。

在我的index.html页面上，我有两个链接，一个叫做较小，另一个叫做较大。

function change_size(element,size){
    var current = parseInt(element.css('font-size'));
    if(size =='smaller'){
        var new_size = current - 2;
    } else if (size=='bigger'){
        var new_size = current + 2;
    }

    element.css('font-size', new_size + 'px');
}

$('#smaller').click(function(){
    change_size($('p') 'Smaller'); /// function call 
});
$('#bigger').click(function(){
    change_size($('p') 'bigger');
});

第一个函数末尾的element.css()行是否将font-size添加到new_size，然后将“px”附加到它？

Answer 1

您的代码创建一个函数change_size，它接收一个或多个jQuery对象（在这种情况下匹配$('p')）并且取决于传递给函数的字符串（Smaller或{ {1}}）它会改变字体大小。单击元素bigger或$('#smaller')即可触发该功能。 $('#bigger')所做的是解析一个字符串参数并返回一个整数，你可以找到more info on MDN。

最后，该功能可以优化为：

parseInt()

Answer 2

parseInt用于将字符串值转换（转换）为整数。

First if语句检查传递给Size变量的内容。

element.css('font-size'正在访问元素的font-size css属性。如果将1个参数传递给function element.css，它将返回属性值，如果传递两个参数，则会设置该值。

$('#smaller')用于获取id较小的元素的引用，.click附加函数点击

转到JQuery教程以便更好地理解。

Jquery代码，没有正确理解

2 个答案: