Question

如何压缩下面的jQuery代码？

//FIRST CODE
jQuery('.expand-two').click(function(){
    jQuery('.content-two').slideToggle('fast');
});
jQuery('.expand-two').toggle(function() {
jQuery('.content-two').slideDown('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
});
}, function() {
jQuery('.content-two').slideUp('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(0deg)",
    "-moz-transform": "rotate(0deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
});
});
//SECOND CODE
jQuery('.expand-three').click(function(){
    jQuery('.content-three').slideToggle('fast');
});
jQuery('.expand-three').toggle(function() {
jQuery('.content-three').slideDown('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
});
}, function() {
jQuery('.content-three').slideUp('slow');
jQuery(this).find("img").css({
    "-webkit-transform": "rotate(0deg)",
    "-moz-transform": "rotate(0deg)",
    "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
});
});

如何将多个DIV类插入一行？无需为每个片段分配如此多的代码？

非常感谢你！

Answer 1

我看到的一个想法 - 为元素旋转制作一些功能 - 例如。

function setRot( jqElm, angle ) {
    var angleIe = Math.round( angle / 90 );
    jqElm.css({
        "-webkit-transform": "rotate(" + angle + "deg)",
        "-moz-transform": "rotate(" + angle + "deg)",
        "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation="+ angleIe +")"
    });
}

然后在代码中创建

setRot( jQuery(this).find("img"), 90 );

你可以做的第二件事是通过用逗号查询来使用多个选择器（如果可能的话） -

jQuery('.expand-two, .expand-three' )....

Answer 2

jQuery('.expand-two, .expand-three') -

允许选择两者并最小化代码。

Answer 3

jQuery('.expand-two, .expand-three').click(){
   value = $( this ). attr("class");
   value = value.substr(value.indexOf("-"));
   doAnim(value);
}

function doAnim(value){
   $('.expand-'+value).toggle() ... some code
}

我如何压缩这个jQuery代码？

3 个答案: