javascript - 我怎样才能让这段Javascript代码更简洁呢？

Question

对编码相当陌生，我正在构建一个四连游戏。我粘贴的代码允许我将红色和黄色标记拖放到游戏板顶行的单元格中。这是可行的，但在继续下一步之前，我想知道是否有一种不太“冗长”的方法可以解决这个问题？更专业的方法？

var dragYellow = document.getElementById("yellowToken1");
var dragRed = document.getElementById("redToken1");   
var dropLoc10 = document.getElementById("10");   
var dropLoc11 = document.getElementById("11");
var dropLoc12 = document.getElementById("12");
var dropLoc13 = document.getElementById("13");
var dropLoc14 = document.getElementById("14");
var dropLoc15 = document.getElementById("15");
var dropLoc16 = document.getElementById("16");

dragYellow.ondragstart = function(evt) {  
    evt.dataTransfer.setData("key", "yellowToken1");
}

dragRed.ondragstart = function(evt) {  
    evt.dataTransfer.setData("key", "redToken1");
}

dropLoc10.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc11.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc12.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc13.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc14.ondragover = function(evt) {    
    evt.preventDefault();                       
} 

dropLoc15.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc16.ondragover = function(evt) {    
    evt.preventDefault();                       
}

dropLoc10.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc10.appendChild(myNewElement);                    

}

dropLoc11.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc11.appendChild(myNewElement);                    

}

dropLoc12.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc12.appendChild(myNewElement);                    

}

dropLoc13.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc13.appendChild(myNewElement);                    

}

dropLoc14.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc14.appendChild(myNewElement);                    

}

dropLoc15.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc15.appendChild(myNewElement);                    

}

dropLoc16.ondrop = function(evt) {                  
    evt.preventDefault();             
    var dropItem = evt.dataTransfer.getData("key");  
    var myElement = document.getElementById(dropItem);   
    var myNewElement = document.createElement("img");   
    myNewElement.src = myElement.src;                   
    dropLoc16.appendChild(myNewElement);                    

}

Answer 1

类似于:

    var dragYellow = document.getElementById("yellowToken1");
    var dragRed = document.getElementById("redToken1");  
    var dropLoc = [];
    for (i = 10; i < 17; i++) {
        dropLoc[i] = document.getElementById(i.toString());
        dropLoc[i].ondragover = function(evt) {    
            evt.preventDefault();                       
        }
        dropLoc[i].ondrop = function(evt) {                  
            evt.preventDefault();             
            var dropItem = evt.dataTransfer.getData("key");  
            var myElement = document.getElementById(dropItem);   
            var myNewElement = document.createElement("img");   
            myNewElement.src = myElement.src;                   
            dropLoc[i].appendChild(myNewElement);                    

        }
    } 


    dragYellow.ondragstart = function(evt) {  
        evt.dataTransfer.setData("key", "yellowToken1");
    }

    dragRed.ondragstart = function(evt) {  
        evt.dataTransfer.setData("key", "redToken1");
    }

您知道 DRY(不要重复自己)这个词吗？如果您发现自己用数字作为后缀编写名称，那么这是一个使用数组代替的巨大提示!