Question

可能重复：
I need to down-size jQuery code

昨天我放了一个jQuery代码snipet y开发并需要一些帮助，它工作正常，但它太长而重复，我不是故意不尊重昨天试图帮助我的篦程序员因为有篦子，但几乎可以肯定我没有问正确的问题，其中一个主题提出这个问题需要在这里提出，所以我现在正在做。

好的，我在代码中可以看到，左侧div中有12个tile，这些tile是从mySql数据库生成的，并且会显示缩略图..当点击tile时，内容就在right div将淡出并显示与所单击的tile对应的div，出现的div上的信息也存储在mySql db中。它工作正常但是。整个事情的代码太大了，而且重复性很强。它不是一个图库，图块上的图标可能与右边的内容无关。

感谢mrtsherman，jfriend00和elclanrs昨晚的帮助，我知道没有问正确的问题是我的错。 Som，这是代码：http://jsfiddle.net/tgcNd/6/

在我的Frankenstein下面的代码

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>

Adn最后是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;}

Answer 1

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

Answer 2

这看起来非常简单......请参阅代码的my version

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

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

我需要将我的jQuery Code缩小到重复

2 个答案: