我需要向下大小我的jQuery代碼它於反覆

-2

可能重複：
I need to down-size jQuery code 我需要向下大小我的jQuery代碼它於反覆

昨天我把一個jQuery一小段代碼片段使y發達國家和需要一點幫助，因此IT工作正常，但它太長時間和重複性，我不是不尊重那些昨天試圖幫助我的爐排程序員，因爲他們在那裏激烈競爭，但它幾乎可以肯定我沒有問正確的問題，主題之一表明需要的問題在這裏被問到，所以我現在正在做。

好吧，我已經在代碼中看到了，在左邊div中有12個tile，這些tile將從mySql數據庫中生成，並且會顯示一個縮略圖..當點擊一個tile時，右邊的div會淡出並顯示與點擊的tile對應的div，出現的div上的信息也會存儲在mySql數據庫中。它的工作確定但是。整個事情的代碼太大了，而且是重複的。這不是一個畫廊，瓦片上的圖標可能與正確的內容無關。

感謝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>

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;}

來源

2012-04-15 Samuel Ramzan

請不要發佈[同樣的問題兩次]（http://stackoverflow.com/questions/10159096/i-need-to-down-size-jquery-doce），以及你在第一個問題中得到的答案有什麼問題（http：// stackoverflow .COM /問題/ 10159096/I-需要到下大小jQuery的谷）？您應該將其發佈在[code review SE site]（http://codereview.stackexchange.com/）上。 – Sparky 2012-04-15 16:38:34

有時候，如果它有效，請保持獨立。這段代碼非常易讀，對另一個人來說不會太難閱讀。 – DOK 2012-04-15 16:40:18

對不起，謝謝，我閱讀規則，但也遵循其他一些職位上給我的建議。不意味着無禮。幸運的是，在這篇文章中，這個問題由Ilia G（愛這個人）解決了。感謝和抱歉給您帶來的不便 – 2012-04-15 17:38:46

這看起來很瑣碎...查看代碼的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

來源

2012-04-15 16:49:13

哦，我的天哪，那純粹的天才......非常感謝，你很棒，我對你很尊敬，很美，很有效...... Yeees！謝謝，並感謝所有有興趣解決這個我的瑣碎難題的人...愛你的男人。 – 2012-04-15 17:28:54

它不會編輯你的代碼，但你可以使用code compressor來縮小您的代碼，以便加快頁面加載速度。否則，你可以創建一個循環，但你仍然需要一些不會使代碼更短的數組。

來源

2012-04-15 16:44:13 James

是的你是對的，但Ilia G只是保存了一天。感謝您的鏈接，我相信它會派上用場。 – 2012-04-15 17:36:16

我需要向下大小我的jQuery代碼它於反覆

回答

相關問題