如何简化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代码

回答

相关问题