我們可以縮短我寫在js中的jQuery代碼嗎？

-2

我是jquery的初學者。我創建了一個小的jquery thianimate函數。我們可以縮短我寫在js中的jQuery代碼嗎？

但我覺得我的jQuery代碼太長。

請幫我縮短代碼。我寫了很多行來保持動畫效果。

bindEvents(); 
 

 
function bindEvents(){ 
 
oldClickedNumber=0; 
 
$('.dice').hide(); 
 

 
\t $('.numbers').on('click', function() { 
 
\t clickedNumber=$(this).text(); 
 
\t 
 
\t \t if (clickedNumber==1){ 
 
\t \t \t $('#dice_1').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t if (oldClickedNumber==2){ \t 
 
\t \t \t \t $('#dice_1').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_2').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_3').animate({'top': '0', left: '0' }).hide(); 
 
\t \t \t \t $('#dice_4').animate({'top': '0', left: '0' }).hide(); 
 
\t \t \t \t $('#dice_5').animate({'top': '0', left: '0' }).hide(); 
 
\t \t \t \t $('#dice_6').animate({'top': '0', left: '0' }).hide(); 
 
\t \t \t } else if (oldClickedNumber==3){ 
 
\t \t \t \t $('#dice_3').hide().animate({'top': '0', left: '0' }); 
 
\t \t \t \t $('#dice_1').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_2').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t 
 
\t \t \t } else if (oldClickedNumber==4){ \t 
 
\t \t \t \t $('#dice_1').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_2').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_3').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_4').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t } else if (oldClickedNumber==5){ \t 
 
\t \t \t \t $('#dice_1').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_2').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_3').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_4').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_5').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t } else if (oldClickedNumber==6){ \t 
 
\t \t \t \t $('#dice_1').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_2').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_3').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_4').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_5').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t \t $('#dice_6').animate({'top': '0', left: '0' }).show(); 
 
\t \t \t } 
 
\t \t \t oldClickedNumber=clickedNumber; 
 
\t \t } else if (clickedNumber==2){ 
 
\t \t \t //$('.dice').hide(); 
 
\t \t \t $('#dice_1').show().animate({'top': '-40', left: '40' }); 
 
\t \t \t $('#dice_2').show().animate({'top': '40', left: '-40' }); 
 
\t \t \t $('#dice_3').hide().animate({'top': '0', left: '0' }); 
 
\t \t \t $('#dice_4').hide().animate({'top': '0', left: '0' }); 
 
\t \t \t $('#dice_5').hide().animate({'top': '0', left: '0' }); 
 
\t \t \t $('#dice_6').hide().animate({'top': '0', left: '0' }); 
 
\t \t \t oldClickedNumber=clickedNumber; 
 
\t \t } else if (clickedNumber==3){ 
 
\t \t \t //$('.dice').hide(); 
 
\t \t \t $('#dice_1').show().animate({'top': '-50', left: '50' }); 
 
\t \t \t $('#dice_2').show().animate({'top': '50', left: '-50' }); 
 
\t \t \t $('#dice_3').show().animate({'top': '0', left: '0' }); 
 
\t \t \t $('#dice_4').show().animate({'top': '0', left: '0' }); 
 
\t \t \t $('#dice_5').show().animate({'top': '0', left: '0' }); 
 
\t \t \t $('#dice_6').show().animate({'top': '0', left: '0' }); 
 
\t \t \t oldClickedNumber=clickedNumber; 
 
\t \t } else if (clickedNumber==4){ 
 
\t \t \t //$('.dice').hide(); 
 
\t \t \t $('#dice_1').show().animate({'top': '-40', left: '40' }); 
 
\t \t \t $('#dice_2').show().animate({'top': '40', left: '-40' }); 
 
\t \t \t $('#dice_3').show().animate({'top': '-40', left: '-40' }); 
 
\t \t \t $('#dice_4').show().animate({'top': '40', left: '40' }); 
 
\t \t \t $('#dice_5').hide().animate({'top': '0', left: '0' }); 
 
\t \t \t $('#dice_6').hide().animate({'top': '0', left: '0' }); 
 
\t \t \t oldClickedNumber=clickedNumber; 
 
\t \t } else if (clickedNumber==5){ 
 
\t \t \t //$('.dice').hide(); 
 
\t \t \t $('#dice_1').show().animate({'top': '-50', left: '50' }); 
 
\t \t \t $('#dice_2').show().animate({'top': '50', left: '-50' }); 
 
\t \t \t $('#dice_3').show().animate({'top': '-50', left: '-50' }); 
 
\t \t \t $('#dice_4').show().animate({'top': '50', left: '50' }); 
 
\t \t \t $('#dice_5').show().animate({'top': '0', left: '0' }); 
 
\t \t \t $('#dice_6').show().animate({'top': '0', left: '0' }); 
 
\t \t \t oldClickedNumber=clickedNumber; 
 
\t \t } else if (clickedNumber==6){ 
 
\t \t \t //$('.dice').hide(); 
 
\t \t \t $('#dice_1').show().animate({'top': '-50', left: '50' }); 
 
\t \t \t $('#dice_2').show().animate({'top': '50', left: '-50' }); 
 
\t \t \t $('#dice_3').show().animate({'top': '-50', left: '-50' }); 
 
\t \t \t $('#dice_4').show().animate({'top': '50', left: '50' }); 
 
\t \t \t $('#dice_5').show().animate({'top': '50', left: '0' }); 
 
\t \t \t $('#dice_6').show().animate({'top': '-50', left: '0' }); 
 
\t \t \t oldClickedNumber=clickedNumber; 
 
\t \t } 
 
\t }); 
 

 
};

.mainContainer { 
 
    width: 400px; 
 
    height: 300px; 
 
    background: #8BC34A; 
 
} 
 

 
.question { 
 
    height: 40px; 
 
    padding: 5px; 
 
} 
 

 
.stage { 
 
    width: 400px; 
 
    height: 200px; 
 
} 
 

 
.numButtons { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: blue; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.buttonsResult { 
 
    background: black; 
 
    width: 200px; 
 
    height: 200px; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.dice { 
 
    height: 30px; 
 
    width: 30px; 
 
    border: 2px solid blue; 
 
    background: white; 
 
    border-radius: 30px; 
 
    margin-top: 75px; 
 
    position: absolute; 
 
    margin-left: 85px; 
 
} 
 

 
.numbers { 
 
    color: white; 
 
    font-family: cursive; 
 
    font-size: 25px; 
 
    /* width: 88px; */ 
 
    /* height: 55px; */ 
 
    float: left; 
 
    padding-right: 4px; 
 
    line-height: 55px; 
 
    text-align: center; 
 
    margin-left: 35px; 
 
    margin-top: 25px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainContainer"> 
 
    <div class="question">Click the numbers on left to see the same number of DOTs on right. 
 
    </div> 
 
    <div class="stage"> 
 
     <div class="numButtons"> 
 
     <div class="numbers" id="one">1</div> 
 
     <div class="numbers" id="two">2</div> 
 
     <div class="numbers" id="three">3</div> 
 
     <div class="numbers" id="four">4</div> 
 
     <div class="numbers" id="five">5</div> 
 
     <div class="numbers" id="six">6</div> 
 
     </div> 
 
     <div class="buttonsResult"> 
 
     <div class="dice" id="dice_1"></div> 
 
     <div class="dice" id="dice_2"></div> 
 
     <div class="dice" id="dice_3"></div> 
 
     <div class="dice" id="dice_4"></div> 
 
     <div class="dice" id="dice_5"></div> 
 
     <div class="dice" id="dice_6"></div> 
 
     </div> 
 
    </div> 
 

 
    </div>

fiddle

來源

2016-07-30 Chetan Pandey

由於堆棧溢出不適用於完整的代碼審查，因此我正在投票關閉此題目以作爲題外話題。（請參閱爲此目的而設計的其他Stack Exchange站點[Code Review]（http://codereview.stackexchange.com/）。） – Bobulous

我想SO想讓你展示一些實際的代碼。 –

如果我是你，我會創建作爲模具的每個面的定義6個對象的列表。每一個這樣的對象有代表點的臉的狀態6個對象的列表 - 如果它是可見的，它的位置，如果它是：然後

faces = [[ 
    // One - all visible at the same position for the animation of all dots converging to one 
    { visible: true, x: 0, y: 0 }, 
    { visible: true, x: 0, y: 0 }, 
    { visible: true, x: 0, y: 0 }, 
    { visible: true, x: 0, y: 0 }, 
    { visible: true, x: 0, y: 0 }, 
    { visible: true, x: 0, y: 0 } 
], [ 
    // Two 
    { visible: true, x: -40, y: -40 }, 
    { visible: true, x: 40, y: 40 }, 
    { visible: false }, 
    { visible: false }, 
    { visible: false }, 
    { visible: false } 
], ....]

單擊事件會讀取適量塗於面部的定義，迭代通過點元素，然後隱藏或顯示每個元素，將它們動畫到適當的位置。

來源

2016-07-30 11:47:26 kamilk

我們可以縮短我寫在js中的jQuery代碼嗎？

回答

相關問題