如何簡化JavaScript代碼

-1

有沒有什麼辦法來簡化這個代碼循環或任何東西？我是JavaScript的初學者，我的代碼很糟糕。請不要告訴我轉換爲jQuery或任何東西。如何簡化JavaScript代碼

 function dragLeftdropLeft1(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Left"); 
      document.getElementById('topLeft1').style.display = "none"; 
      document.getElementById('topLeft2').style.display = "block"; 
     } 
     function dragLeftdropLeft2(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Left"); 
      document.getElementById('topLeft2').style.display = "none"; 
      document.getElementById('topLeft3').style.display = "block"; 
     } 
     function dragLeftdropLeft3(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Left"); 
      document.getElementById('topLeft3').style.display = "none"; 
      document.getElementById('topLeft4').style.display = "block"; 
     } 
     function dragLeftdropLeft4(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Left"); 
      document.getElementById('topLeft4').style.display = "none"; 
      document.getElementById('topLeft5').style.display = "block"; 
     } 
     function dragLeftdropLeft5(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Left"); 
      document.getElementById('topLeft5').style.display = "none"; 
      document.getElementById('topLeft1').style.display = "block"; 
     } 






     function dragLeftdropRight1(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Left"); 
      document.getElementById('topRight1').style.display = "none"; 
      document.getElementById('topRight2').style.display = "block"; 
     } 
     function dragLeftdropRight2(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Left"); 
      document.getElementById('topRight2').style.display = "none"; 
      document.getElementById('topRight3').style.display = "block"; 
     } 
     function dragLeftdropRight3(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Left"); 
      document.getElementById('topRight3').style.display = "none"; 
      document.getElementById('topRight4').style.display = "block"; 
     } 
     function dragLeftdropRight4(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Left"); 
      document.getElementById('topRight4').style.display = "none"; 
      document.getElementById('topRight5').style.display = "block"; 
     } 
     function dragLeftdropRight5(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Left"); 
      document.getElementById('topRight5').style.display = "none"; 
      document.getElementById('topRight1').style.display = "block"; 
     } 







     function dragRightdropLeft1(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Right"); 
      document.getElementById('topLeft1').style.display = "none"; 
      document.getElementById('topLeft2').style.display = "block"; 
     } 
     function dragRightdropLeft2(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Right"); 
      document.getElementById('topLeft2').style.display = "none"; 
      document.getElementById('topLeft3').style.display = "block"; 
     } 
     function dragRightdropLeft3(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Right"); 
      document.getElementById('topLeft3').style.display = "none"; 
      document.getElementById('topLeft4').style.display = "block"; 
     } 
     function dragRightdropLeft4(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Right"); 
      document.getElementById('topLeft4').style.display = "none"; 
      document.getElementById('topLeft5').style.display = "block"; 
     } 
     function dragRightdropLeft5(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Right"); 
      document.getElementById('topLeft5').style.display = "none"; 
      document.getElementById('topLeft1').style.display = "block"; 
     } 







     function dragRightdropRight1(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Right"); 
      document.getElementById('topRight1').style.display = "none"; 
      document.getElementById('topRight2').style.display = "block"; 
     } 
     function dragRightdropRight2(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Right"); 
      document.getElementById('topRight2').style.display = "none"; 
      document.getElementById('topRight3').style.display = "block"; 
     } 
     function dragRightdropRight3(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Right"); 
      document.getElementById('topRight3').style.display = "none"; 
      document.getElementById('topRight4').style.display = "block"; 
     } 
     function dragRightdropRight4(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Right"); 
      document.getElementById('topRight4').style.display = "none"; 
      document.getElementById('topRight5').style.display = "block"; 
     } 
     function dragRightdropRight5(ev) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData("Right"); 
      document.getElementById('topRight5').style.display = "none"; 
      document.getElementById('topRight1').style.display = "block"; 
     }

如果你想在行動中看到的代碼，你可以在http://thomaswd.com/chopsticks看到完整的HTML代碼。我正在嘗試使用HTML和JavaScript製作筷子游戲。

謝謝！

來源

2013-02-02 Thomas Lai

最好去[CodeReview]（http://codereview.stackexchange.com/）。 – hjpotter92

謝謝！我會問那裏 –

@ user2034878如果你打算在CodeReview上詢問它，請在這裏刪除這個問題 – thaJeztah

那麼對於初學者，如果你有一個函數

function some_meaningful_name(ev, hand, toNone, toBlock) { 
      ev.preventDefault(); 
      var data=ev.dataTransfer.getData(hand); 
      document.getElementById(toNone).style.display = "none"; 
      document.getElementById(toBlock).style.display = "block"; 
     }

你可以這樣調用它

some_meaningful_name('Left', 'topRight5', 'topRight1');

那麼，最有可能的，如果你把數組中所有的字符串，可以probablly剛剛產生的所有你需要一個for循環的組合

來源

2013-02-02 08:58:25

你可以添加一個參數，數字，如果它不是問題，並得到這第一個5功能：

function dragLeftdropLeft(ev, num) { 

     ev.preventDefault(); 

     num2 = num + 1; 
     if(num2 == 6) 
       num2 = 1 

     var data=ev.dataTransfer.getData("Left"); 
     document.getElementById('topLeft' + num).style.display = "none"; 
     document.getElementById('topLeft' + num2).style.display = "block"; 
    }

來源

2013-02-02 08:59:24

如何簡化JavaScript代碼

回答

相關問題