-2

可能重复：
我需要缩小 jQuery 代码的大小

昨天我放了一个你开发的 jQuery 代码片段，需要一点帮助，它工作得很好，但是它太长而且重复，我并不是不尊重昨天试图帮助我的程序员，因为有格子，但是它几乎可以肯定我没有问正确的问题，其中一个主题建议需要在这里提出问题，所以我现在正在这样做。

好的，正如您在代码中看到的那样，左侧 div 中有 12 个图块，这些图块将从 mySql 数据库生成，并将显示缩略图.. 当单击图块时，右侧 div 上的内容将淡出并呈现与单击的磁贴对应的 div，出现的 div 上的信息也存储在 mySql db 中。它工作正常，但是。整个事情的代码太大了，而且重复。它不是画廊，并且磁贴上的图标可能与正确的内容无关。

感谢 mrtsherman，jfriend00以及elclanrs昨晚的帮助，我知道没有问正确的问题是我的错。索姆，这里是实际代码：http: //jsfiddle.net/tgcNd/6/

在我的科学怪人的代码下面

jQuery(function($) {
function boton1(event)
{
$(".vitrina1").css("opacity","0");
$(".vitrina1").css("top","0");
$(".vitrina1").animate({"opacity":1,"top":0},300, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton2(event)
{
$(".vitrina2").css("opacity","0");
$(".vitrina2").css("top","-712px");
$(".vitrina2").animate({"opacity":1,"top":-712},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton3(event)
{
$(".vitrina3").css("opacity","0");
$(".vitrina3").css("top","-1424px");
$(".vitrina3").animate({"opacity":1,"top":-1424},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton4(event)
{
$(".vitrina4").css("opacity","0");
$(".vitrina4").css("top","-2136px");
$(".vitrina4").animate({"opacity":1,"top":-2136},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton5(event)
{
$(".vitrina5").css("opacity","0");
$(".vitrina5").css("top","-2848px");
$(".vitrina5").animate({"opacity":1,"top":-2848},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton6(event)
{
$(".vitrina6").css("opacity","0");
$(".vitrina6").css("top","-3560px");
$(".vitrina6").animate({"opacity":1,"top":-3560},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton7(event)
{
$(".vitrina7").css("opacity","0");
$(".vitrina7").css("top","-4272px");
$(".vitrina7").animate({"opacity":1,"top":-4272},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton8(event)
{
$(".vitrina8").css("opacity","0");
$(".vitrina8").css("top","-4984px");
$(".vitrina8").animate({"opacity":1,"top":-4984},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton9(event)
{
$(".vitrina9").css("opacity","0");
$(".vitrina9").css("top","-5696px");
$(".vitrina9").animate({"opacity":1,"top":-5696},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton10(event)
{
$(".vitrina10").css("opacity","0");
$(".vitrina10").css("top","-6408px");
$(".vitrina10").animate({"opacity":1,"top":-6408},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton11(event)
{
$(".vitrina11").css("opacity","0");
$(".vitrina11").css("top","-7120px");
$(".vitrina11").animate({"opacity":1,"top":-7120},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton12(event)
{
$(".vitrina12").css("opacity","0");
$(".vitrina12").css("top","-7832px");
$(".vitrina12").animate({"opacity":1,"top":-7832},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
}
$('#btn1').bind('click', boton1);
$('#btn2').bind('click', boton2);
$('#btn3').bind('click', boton3);
$('#btn4').bind('click', boton4);
$('#btn5').bind('click', boton5);
$('#btn6').bind('click', boton6);
$('#btn7').bind('click', boton7);
$('#btn8').bind('click', boton8);
$('#btn9').bind('click', boton9);
$('#btn10').bind('click', boton10);
$('#btn11').bind('click', boton11);
$('#btn12').bind('click', boton12);
});

的HTML

<div id="contenedorPrimario">
<div id="botones">
<div class="boton" id="btn1"><a class="tooltip" rel="Contenedor 1"><img src="http://www.auviproducciones.com/more/imagenes/imagen1.jpg"></a></div>
<div class="boton" id="btn2"><a class="tooltip" rel="Cajón<br>Contenedor 2"><img src="http://www.auviproducciones.com/more/imagenes/imagen2.jpg"></a></div>
<div class="boton" id="btn3"><a class="tooltip" rel="Este es el<br>Cajón 3"><img src="http://www.auviproducciones.com/more/imagenes/imagen3.jpg"></a></div>
<div class="boton" id="btn4"><a class="tooltip" rel="Ejemplo de contenido<br>dentro del cajón<br>Contenedor 4"><img src="http://www.auviproducciones.com/more/imagenes/imagen4.jpg"></a></div>
<div class="boton" id="btn5"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen5.jpg"></a></div>
<div class="boton" id="btn6"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen6.jpg"></a></div>
<div class="boton" id="btn7"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen7.jpg"></a></div>
<div class="boton" id="btn8"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen8.jpg"></a></div>
<div class="boton" id="btn9"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen9.jpg"></a></div>
<div class="boton" id="btn10"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen10.jpg"></a></div>
<div class="boton" id="btn11"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen11.jpg"></a></div>
<div class="boton" id="btn12"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen12.jpg"></a></div>
</div>
<div id="aparador"> <!-- main right container -->
<div id="mercancia"> <!-- info Divs container this one scrolls uo and down if animation tyoe changes from fade to scroll -->
<div class="vitrina1">Hello this his window #1<br>with mySql content</div>
<div class="vitrina2">Hello this his window #2<br>with mySql content</div>
<div class="vitrina3">Hello this his window #3<br>with mySql content</div>
<div class="vitrina4">window #4<br>with mySql content</div>
<div class="vitrina5">window #5<br>with mySql content</div>
<div class="vitrina6">window #6<br>with mySql content</div>
<div class="vitrina7">window #7<br>with mySql content</div>
<div class="vitrina8">window #8<br>with mySql content</div>
<div class="vitrina9">window #9<br>with mySql content</div>
<div class="vitrina10">window #10<br>with mySql content</div>
<div class="vitrina11">window #11<br>with mySql content</div>
<div class="vitrina12">window #12<br>with mySql content</div>
</div>
</div>
</div>

最后添加 CSS

#contenedorPrimario { position:relative;margin-left:auto;margin-right:auto;width:100%; background: url(../imagenes/fondo_index.jpg); width: 1100px; height: 800px;}
.clear {clear:both;}
/* Inicia Cajón Izquierdo */
#botones {position:absolute; width:450px; height: 592px; margin-left:3px; margin-right:20px;margin-top:50px;padding-bottom:4px;}
.boton {width:150px;height:142px;float:left;cursor: default;}
.boton img {width:150px;height:142px;}
#sociales { position: absolute; width:450px; height: 120px; margin-left: 2px; margin-top: 620px; /*background: #FF3300; */}
/* Inicia Cajón Derecho */
#aparador {position:absolute; margin-top: 50px; margin-left: 456px; width:641px;overflow: hidden; height:712px; background:#666; margin-right: 20px; }
#mercancia {position:absolute; width: 641px; height: 9324px; margin-top: 0px; visibility: visible; background: #fff; }
.vitrina1, .vitrina2, .vitrina3, .vitrina4, .vitrina5, .vitrina6, .vitrina7, .vitrina8, .vitrina9, .vitrina10, .vitrina11, .vitrina12 { position:relative; width:641px; height: 712px; }
.vitrina1 { /*background-color: #33CCCC;*/ background: #D2D2D2;}
.vitrina2 { background-color: #999900;}
.vitrina3 { background-color: #CC6600;}
.vitrina4 { background-color: #AA0000;}
.vitrina5 { background-color: #99CC33;}
.vitrina6 { background-color: #0066CC;}
.vitrina7 { background-color: #570699;}
.vitrina8 { background-color: #CC33CC;}
.vitrina9 { background-color: #02F965;}
.vitrina10 { background-color: #FFFF00;}
.vitrina11 { background-color: #C80461;}
.vitrina12 { background-color: #000066;}​
4

2 回答 2

0

它不会编辑您的代码，但您可以使用代码压缩器来缩小代码，以便更快地加载页面。否则，您可以创建一个循环，但您仍然需要不会真正使代码更短的数组。

于 2012-04-15T16:44:13.220 回答
0

这看起来很微不足道...查看我的代码版本

$("#botones div.boton a").each(function(idx)
{
    $(this).click(function() 
    {
        $("#mercancia div").hide()
            .filter("div.vitrina" + (idx+1)).fadeIn();
        return false;
    });
});​

另请注意，我将vitrinas 的默认样式从更改position:relative为display:none

于 2012-04-15T16:49:13.033 回答