如何压缩这个 jQuery 代码？答案

【问题标题】：How Can I Compact This jQuery Code?如何压缩这个 jQuery 代码？
【发布时间】：2012-01-10 18:27:12
【问题描述】：

如何压缩下面的 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 类插入一行？不必为每个 sn-p 编写这么多代码？

非常感谢！

【问题讨论】：

jQuery('.expand-two, .expand-three') 选择这两个元素。您可以使用它来帮助组合功能。
你想用.toggle做什么？它不需要两个函数参数。
@meagar 它并没有真正记录它在这里的使用方式，但它确实有效。 .toggle(function () {}, function () {}) 将在两个功能之间切换。
@Rocket：但是我在一个页面上有多个实例，当我用逗号分隔它们应用它们时，当我切换一个类（选择器？）时它们都被关闭。

标签： javascript jquery coding-style compression

【解决方案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' )....

【讨论】：

但我怎么能在某种意义上做到这一点，因为它不会触发所有代码？考虑到我在一个页面上有多个这样的实例。
嗯？此函数将修改您作为参数传递的实例，并确定尺寸以删除所有旋转设置（4 x 5 行，带函数（8 + 4 行）
如果你点击其中一个，就会显示所有这些。

【解决方案2】：

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

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

【讨论】：

我将它们作为类而不是 ID 的原因是因为页面上有此代码的多个实例，当我尝试上面列出的内容时，它会触发连接到此代码的每个 div 而不是分开。不过谢谢！ :)

【解决方案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
}

【讨论】：